sigilUI

Card Cell

Place content in a bordered cell aligned to the page grid.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { CardCell } from "@sigil-ui/components";

Usage

<CardCell>
    CardCell content
  </CardCell>

Props

PropTypeDefaultDescription
titleReactNode—Card title (rendered with font-display).
footerReactNode—Footer content (rendered in a mono strip with border-t).
hrefstring—Make the card clickable as a link.
paddingstringvar(--s-card-padding, 16px)Padding override.

Token integration

CSS VariablePurpose
--s-card-paddingCard padding
--s-backgroundBackground
--s-font-displayFont display
--s-textText
--s-text-mutedText muted
--s-borderBorder