Aside

Complementary column content (<aside>), named “Related information” unless given an aria-label. The column’s width, surface and gutter belong to the page layout; the aside and its parts render flush to it.

Import

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

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

Usage

<Aside>
  <>
          <AsideHeader title="Pending" action={<a href="#all">View all</a>} />
          <Note>Nothing pending.</Note>
        </>
</Aside>

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
• Custom Label
• Spanish

Source

packages/ui/src/containers/aside/aside.tsx