Card

A content card takes its title, a meta fact at the end of the title row, a description under it, its content as children, and actions in a strip along the bottom.

• Set render={<article />} on a card that stands on its own.

Link and button cards

With href, the whole card is one native link, through the application's router link from LinkProvider; with onClick, it is one native button.

• Either holds only phrasing content, such as spans, and no links or controls of its own, and its text names it.
• disabled turns either off.

<Card href="/projects/northwind">
  <Text render={<span />} variant="title">
    Northwind launch
  </Text>
  <Text render={<span />} emphasis="muted">
    12 open tasks
  </Text>
</Card>

Feature card

A feature card is a Card holding a Row with wrap and align="center": the icon in a muted Text with render={<span />}, a Column of a headline Text and a body-sm Text, and the Button that starts the feature.

• The Column takes flex: '1 1 16rem', so the text keeps at least 16 rem and the button wraps below it in a narrower card.
• Render the heading at the level the outline needs, such as render={<h3 />} under a section's h2; variant="headline" keeps its look.
• The Button takes href where the action goes somewhere.
• Lay several side by side in a Grid of even columns.

<Card>
  <Row wrap align="center" gap={4}>
    <Text render={<span />} emphasis="muted">
      <IconUploadFile width="1.5rem" height="1.5rem" />
    </Text>
    <Column gap={1} style={{ flex: '1 1 16rem' }}>
      <Text render={<h3 />} variant="headline">
        Import your plans
      </Text>
      <Text variant="body-sm">Bring in spreadsheets and documents from another tool.</Text>
    </Column>
    <Button variant="secondary">Import</Button>
  </Row>
</Card>

Backgrounds

background is muted, the default, default or page. default names the token role it paints, --env-color-bg-default, as Surface's does, not Card's default.

<Card background="default" title="Notifications">
  <Text emphasis="muted">Email for mentions and a weekly summary.</Text>
</Card>

Loading

skeleton shows the card as its own skeleton until its content arrives: text becomes bars and controls filled shapes.

• Render the same cards over placeholder items, from placeholders.
• A title or description given as undefined is a bar of its usual length.

<Grid columns={2} gap={4}>
  {(members ?? placeholders<Member>(2)).map((member) => (
    <Card key={member.id} skeleton={!members} title={member.name} description={member.role} />
  ))}
</Grid>

The title is an h3; set headingLevel to fit the page's outline, and its type stays the title type.

• Lay out the content with Text, Row and Column, one card per subject, never a card inside a card, and put cards side by side in a Grid.
• A card fills its container's width.
• The parts are the surface, env-card, its header, env-card-header, with the title, env-card-title, and the meta, env-card-meta; the description, env-card-description; the body, env-card-body; and the actions, env-card-footer.
• A feature card's parts are envUI's own components inside it: its icon, env-card env-text > svg, its heading, env-card env-text[data-variant='headline'], its sentence, env-card env-text[data-variant='body-sm'], and its action, env-card env-button.

• Its hover, focus and press then follow them, as state layers; with none set, it keeps its own colors.
• padding sets the inset as a step of the spacing scale, such as 6 for 2 rem, and 0 removes it.