Skip to Content
Referencefusion-uiComponentsDisplayInfo

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 overline is a small text element that appears above the headline. It is often used to indicate the type of content.
  • The headline is 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 title is 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

Eastern Wood-Pewee

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.

1.ColumnThe main container for the Info component.
2.ContentA container for the text elements.
3.Title GroupA container for the overline, headline, and title.
4.OverlineAn optional small text element that appears above the headline.
5.HeadlineAn extra high emphasis text element that is even larger than the title.
6.TitleA high emphasis text element that relates to the body.
7.BodyThe main body of text.
8.ActionsA container for any actions that are related to the content.

Reference

Props

NameTypeDefaultDescription
emphasisstring"medium"The visual emphasis of the content.
overlineText-The overline text.
headlineText-The headline text.
titleText-The title text.
bodyMaybeText-The body text.
actionsReactNode-The actions to display below the content.

The Info component also inherits all props from the Column component.

Tokens

KeyDefault Value
info.column.base.gapvar(--gpqiqdf)
info.content.variants.emphasis.low.gapvar(--gpqiqd5)
info.content.variants.emphasis.low.@media.screen and (min-width: 640px).gapvar(--gpqiqd7)
info.content.variants.emphasis.low.@media.screen and (min-width: 1024px).gapvar(--gpqiqd9)
info.content.variants.emphasis.low.@media.screen and (min-width: 1366px).gapvar(--gpqiqd9)
info.content.variants.emphasis.medium.gapvar(--gpqiqd9)
info.content.variants.emphasis.medium.@media.screen and (min-width: 640px).gapvar(--gpqiqdb)
info.content.variants.emphasis.medium.@media.screen and (min-width: 1024px).gapvar(--gpqiqdd)
info.content.variants.emphasis.medium.@media.screen and (min-width: 1366px).gapvar(--gpqiqdd)
info.content.variants.emphasis.high.gapvar(--gpqiqdd)
info.content.variants.emphasis.high.@media.screen and (min-width: 640px).gapvar(--gpqiqdf)
info.content.variants.emphasis.high.@media.screen and (min-width: 1024px).gapvar(--gpqiqdh)
info.content.variants.emphasis.high.@media.screen and (min-width: 1366px).gapvar(--gpqiqdh)
info.titleGroup.variants.emphasis.low.gapvar(--gpqiqd3)
info.titleGroup.variants.emphasis.low.@media.screen and (min-width: 640px).gapvar(--gpqiqd5)
info.titleGroup.variants.emphasis.low.@media.screen and (min-width: 1024px).gapvar(--gpqiqd7)
info.titleGroup.variants.emphasis.low.@media.screen and (min-width: 1366px).gapvar(--gpqiqd7)
info.titleGroup.variants.emphasis.medium.gapvar(--gpqiqd3)
info.titleGroup.variants.emphasis.medium.@media.screen and (min-width: 640px).gapvar(--gpqiqd5)
info.titleGroup.variants.emphasis.medium.@media.screen and (min-width: 1024px).gapvar(--gpqiqd7)
info.titleGroup.variants.emphasis.medium.@media.screen and (min-width: 1366px).gapvar(--gpqiqd7)
info.titleGroup.variants.emphasis.high.gapvar(--gpqiqd3)
info.titleGroup.variants.emphasis.high.@media.screen and (min-width: 640px).gapvar(--gpqiqd5)
info.titleGroup.variants.emphasis.high.@media.screen and (min-width: 1024px).gapvar(--gpqiqd7)
info.titleGroup.variants.emphasis.high.@media.screen and (min-width: 1366px).gapvar(--gpqiqd7)
info.overline.base.fontvar(--_1i4ikbk28)
info.overline.base.colorinherit
info.title.base.colorinherit
info.title.variants.emphasis.low.fontvar(--_1i4ikbk1o)
info.title.variants.emphasis.low.@media.screen and (min-width: 640px).fontvar(--_1i4ikbk1p)
info.title.variants.emphasis.low.@media.screen and (min-width: 1024px).fontvar(--_1i4ikbk1q)
info.title.variants.emphasis.low.@media.screen and (min-width: 1366px).fontvar(--_1i4ikbk1q)
info.title.variants.emphasis.medium.fontvar(--_1i4ikbk1k)
info.title.variants.emphasis.medium.@media.screen and (min-width: 640px).fontvar(--_1i4ikbk1l)
info.title.variants.emphasis.medium.@media.screen and (min-width: 1024px).fontvar(--_1i4ikbk1m)
info.title.variants.emphasis.medium.@media.screen and (min-width: 1366px).fontvar(--_1i4ikbk1m)
info.title.variants.emphasis.high.fontvar(--_1i4ikbk1g)
info.title.variants.emphasis.high.@media.screen and (min-width: 640px).fontvar(--_1i4ikbk1h)
info.title.variants.emphasis.high.@media.screen and (min-width: 1024px).fontvar(--_1i4ikbk1i)
info.title.variants.emphasis.high.@media.screen and (min-width: 1366px).fontvar(--_1i4ikbk1i)
info.subtitle.base.colorinherit
info.subtitle.variants.emphasis.low.fontvar(--_1i4ikbk20)
info.subtitle.variants.emphasis.low.@media.screen and (min-width: 640px).fontvar(--_1i4ikbk21)
info.subtitle.variants.emphasis.low.@media.screen and (min-width: 1024px).fontvar(--_1i4ikbk22)
info.subtitle.variants.emphasis.low.@media.screen and (min-width: 1366px).fontvar(--_1i4ikbk22)
info.subtitle.variants.emphasis.medium.fontvar(--_1i4ikbk1w)
info.subtitle.variants.emphasis.medium.@media.screen and (min-width: 640px).fontvar(--_1i4ikbk1x)
info.subtitle.variants.emphasis.medium.@media.screen and (min-width: 1024px).fontvar(--_1i4ikbk1y)
info.subtitle.variants.emphasis.medium.@media.screen and (min-width: 1366px).fontvar(--_1i4ikbk1y)
info.subtitle.variants.emphasis.high.fontvar(--_1i4ikbk1s)
info.subtitle.variants.emphasis.high.@media.screen and (min-width: 640px).fontvar(--_1i4ikbk1t)
info.subtitle.variants.emphasis.high.@media.screen and (min-width: 1024px).fontvar(--_1i4ikbk1u)
info.subtitle.variants.emphasis.high.@media.screen and (min-width: 1366px).fontvar(--_1i4ikbk1u)
info.body.variants.emphasis.low.fontvar(--_1i4ikbk25)
info.body.variants.emphasis.medium.fontvar(--_1i4ikbk25)
info.body.variants.emphasis.high.fontvar(--_1i4ikbk25)
Last updated on