Facts

Three-column grid of key facts with a dashed top separator. Wrap each <dt>/<dd> pair in its own <div> (one grid cell). Collapses to one column when its own container is 560px wide or less.

Import

import { Facts } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/facts.

Usage

<Facts>
  <>
          <div>
            <dt>Visitas</dt>
            <dd>14 este año</dd>
          </div>
          <div>
            <dt>Barbero habitual</dt>
            <dd>Diego Quispe</dd>
          </div>
          <div>
            <dt>Gasto total</dt>
            <dd>S/ 560</dd>
          </div>
        </>
</Facts>

Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Narrow

Source

packages/ui/src/containers/facts/facts.tsx