Catalog Cards

<.hero>

ConnieUI.Cards

Good afternoon, Sofie

7 documents are waiting for signatures.

HEEx 
<div class="w-3xl">
  <ConnieUI.Cards.hero>
    <ConnieUI.Typography.subtitled_heading level="h1-display">
      Good afternoon, Sofie
      <:subtitle>7 documents are waiting for signatures.</:subtitle>
    </ConnieUI.Typography.subtitled_heading>
  </ConnieUI.Cards.hero>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

Set by the example

gradient

Docs

A page's headline band, drawn in a color tag. On a light tag (`ConnieUI.ColorTags.light?/1`) the hero sets `text-primary` and carries `data-light`, so content that sets its own white text switches with a `[[data-light]_&]:` variant, e.g. `text-white [[data-light]_&]:text-primary`.
Attribute Type Default Description
gradient :any nil
a `ConnieUI.ColorTags` tag to draw the hero in; nil is the brand gradient
grayscale :boolean false
Slot Slot attributes Description
inner_block *