Info
The Info component is a versatile container for displaying structured text content. It’s designed to create a clear and consistent textual hierarchy, with support for an overline, headline, title, body, and actions.
<Info overline="Alder Flycatcher" headline="Palm Warbler" title="California Thrasher" body="Cena urbanus adipiscor aperiam enim capillus ultio vitiosus pauper vito. Quis ambulo clementia tubineus corroboro. Repellat adfectus eaque esse nihil sub apparatus vitiosus. Compono attonbitus alioqui. Repellat thesaurus coruscus debilito aureus infit uter talio voluptatem tamdiu." />
Features
Titles
The Info component supports three levels of titles: overline, headline, and title.
- The
overlineis a small text element that appears above the headline. It is often used to indicate the type of content. - The
headlineis an extra high emphasis text element that is even larger than the title. It is used to draw attention to the main idea of the content, but should only be used in top level content. - The
titleis a high emphasis text element that relates to the body. This is the most common title level and is often used to describe the body.
Emphasis
The emphasis prop adjusts the visual weight of the text elements. It has three levels: high, medium (default), and low.
<Info emphasis="low" overline="Asian Brown Flycatcher" headline="Rock Ptarmigan" title="American Goldfinch" body="Despecto bellicus vilis spes tempore appositus ancilla terminatio tabernus stips. Aeger depono sortitus aeneus itaque sortitus nihil. Accusamus adulescens cohibeo curriculum repudiandae similique verbum quae acquiro. Despecto deserunt via. Vomica cursus tumultus vomica." />
Actions
You can add interactive elements like buttons to the Info component using the actions prop.
<Info title="Canyon Towhee" body="Desino stips taceo degusto cura traho vulnus traho. Perspiciatis creptio averto claro demitto complectus deleniti cupio comitatus. Degusto caelum trans optio. Tergiversatio comparo depromo talus cupiditas minima commemoro celebrer. Atque ut delego clam verbum cupiditas claro viriliter contra acidus." actions={ <ButtonGroup> <Button variant="primary">Accept</Button> <Button variant="secondary">Decline</Button> </ButtonGroup> } />
Customizing Text
Each text element (overline, headline, title, body) can be customized by passing an object with Text props instead of a string.
<Info headline={{ children: "Ruby-throated Hummingbird", color: "primary.base", }} body="Recusandae laudantium voluptatibus sopor praesentium contigo cribro copia defero. Vitiosus tot anser. Antiquus casus vigilo adficio a vulpes agnosco alo. Tubineus velut toties tardus sit quasi. Rem admiratio vehemens creo molestiae." />
Anatomy
Little Ringed Plover
Red-throated Loon
Optio chirographum varietas. Coruscus speculum speciosus vereor. Somnus tamquam tumultus demergo adsuesco vigilo tempore victus cetera. Creber vinum annus atrocitas tergeo. Textilis cum accendo demum acies credo agnosco arto.
Reference
Props
| Name | Type | Default | Description |
|---|---|---|---|
emphasis | string | "medium" | The visual emphasis of the content. |
overline | Text | - | The overline text. |
headline | Text | - | The headline text. |
title | Text | - | The title text. |
body | MaybeText | - | The body text. |
actions | ReactNode | - | The actions to display below the content. |
The Info component also inherits all props from the Column component.
Tokens
| Key | Default Value |
|---|---|
info.column.base.gap | var(--gpqiqdf) |
info.content.variants.emphasis.low.gap | var(--gpqiqd5) |
info.content.variants.emphasis.low.@media.screen and (min-width: 640px).gap | var(--gpqiqd7) |
info.content.variants.emphasis.low.@media.screen and (min-width: 1024px).gap | var(--gpqiqd9) |
info.content.variants.emphasis.low.@media.screen and (min-width: 1366px).gap | var(--gpqiqd9) |
info.content.variants.emphasis.medium.gap | var(--gpqiqd9) |
info.content.variants.emphasis.medium.@media.screen and (min-width: 640px).gap | var(--gpqiqdb) |
info.content.variants.emphasis.medium.@media.screen and (min-width: 1024px).gap | var(--gpqiqdd) |
info.content.variants.emphasis.medium.@media.screen and (min-width: 1366px).gap | var(--gpqiqdd) |
info.content.variants.emphasis.high.gap | var(--gpqiqdd) |
info.content.variants.emphasis.high.@media.screen and (min-width: 640px).gap | var(--gpqiqdf) |
info.content.variants.emphasis.high.@media.screen and (min-width: 1024px).gap | var(--gpqiqdh) |
info.content.variants.emphasis.high.@media.screen and (min-width: 1366px).gap | var(--gpqiqdh) |
info.titleGroup.variants.emphasis.low.gap | var(--gpqiqd3) |
info.titleGroup.variants.emphasis.low.@media.screen and (min-width: 640px).gap | var(--gpqiqd5) |
info.titleGroup.variants.emphasis.low.@media.screen and (min-width: 1024px).gap | var(--gpqiqd7) |
info.titleGroup.variants.emphasis.low.@media.screen and (min-width: 1366px).gap | var(--gpqiqd7) |
info.titleGroup.variants.emphasis.medium.gap | var(--gpqiqd3) |
info.titleGroup.variants.emphasis.medium.@media.screen and (min-width: 640px).gap | var(--gpqiqd5) |
info.titleGroup.variants.emphasis.medium.@media.screen and (min-width: 1024px).gap | var(--gpqiqd7) |
info.titleGroup.variants.emphasis.medium.@media.screen and (min-width: 1366px).gap | var(--gpqiqd7) |
info.titleGroup.variants.emphasis.high.gap | var(--gpqiqd3) |
info.titleGroup.variants.emphasis.high.@media.screen and (min-width: 640px).gap | var(--gpqiqd5) |
info.titleGroup.variants.emphasis.high.@media.screen and (min-width: 1024px).gap | var(--gpqiqd7) |
info.titleGroup.variants.emphasis.high.@media.screen and (min-width: 1366px).gap | var(--gpqiqd7) |
info.overline.base.font | var(--_1i4ikbk28) |
info.overline.base.color | inherit |
info.title.base.color | inherit |
info.title.variants.emphasis.low.font | var(--_1i4ikbk1o) |
info.title.variants.emphasis.low.@media.screen and (min-width: 640px).font | var(--_1i4ikbk1p) |
info.title.variants.emphasis.low.@media.screen and (min-width: 1024px).font | var(--_1i4ikbk1q) |
info.title.variants.emphasis.low.@media.screen and (min-width: 1366px).font | var(--_1i4ikbk1q) |
info.title.variants.emphasis.medium.font | var(--_1i4ikbk1k) |
info.title.variants.emphasis.medium.@media.screen and (min-width: 640px).font | var(--_1i4ikbk1l) |
info.title.variants.emphasis.medium.@media.screen and (min-width: 1024px).font | var(--_1i4ikbk1m) |
info.title.variants.emphasis.medium.@media.screen and (min-width: 1366px).font | var(--_1i4ikbk1m) |
info.title.variants.emphasis.high.font | var(--_1i4ikbk1g) |
info.title.variants.emphasis.high.@media.screen and (min-width: 640px).font | var(--_1i4ikbk1h) |
info.title.variants.emphasis.high.@media.screen and (min-width: 1024px).font | var(--_1i4ikbk1i) |
info.title.variants.emphasis.high.@media.screen and (min-width: 1366px).font | var(--_1i4ikbk1i) |
info.subtitle.base.color | inherit |
info.subtitle.variants.emphasis.low.font | var(--_1i4ikbk20) |
info.subtitle.variants.emphasis.low.@media.screen and (min-width: 640px).font | var(--_1i4ikbk21) |
info.subtitle.variants.emphasis.low.@media.screen and (min-width: 1024px).font | var(--_1i4ikbk22) |
info.subtitle.variants.emphasis.low.@media.screen and (min-width: 1366px).font | var(--_1i4ikbk22) |
info.subtitle.variants.emphasis.medium.font | var(--_1i4ikbk1w) |
info.subtitle.variants.emphasis.medium.@media.screen and (min-width: 640px).font | var(--_1i4ikbk1x) |
info.subtitle.variants.emphasis.medium.@media.screen and (min-width: 1024px).font | var(--_1i4ikbk1y) |
info.subtitle.variants.emphasis.medium.@media.screen and (min-width: 1366px).font | var(--_1i4ikbk1y) |
info.subtitle.variants.emphasis.high.font | var(--_1i4ikbk1s) |
info.subtitle.variants.emphasis.high.@media.screen and (min-width: 640px).font | var(--_1i4ikbk1t) |
info.subtitle.variants.emphasis.high.@media.screen and (min-width: 1024px).font | var(--_1i4ikbk1u) |
info.subtitle.variants.emphasis.high.@media.screen and (min-width: 1366px).font | var(--_1i4ikbk1u) |
info.body.variants.emphasis.low.font | var(--_1i4ikbk25) |
info.body.variants.emphasis.medium.font | var(--_1i4ikbk25) |
info.body.variants.emphasis.high.font | var(--_1i4ikbk25) |