# Facts

> Three-column grid of key facts with a dashed top separator.

Source: https://ui.jcsoftdev.com/docs/components/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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-facts--default)
- [Narrow](/storybook/?path=/story/containers-facts--narrow)

## Source

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