Card – Once UI

The Card component is a versatile, fluid container for content with a hover effect. It handles click events and href attributes.

Card

Lorant One

Proxima bA planet so cruel on the surface, but once you explore what's underneath, you'll question everything you know. Yet, you vibe with it.

345

<Row maxWidth={24}>
  <Card radius="l-4" direction="column" border="neutral-alpha-medium">
    <Row fillWidth paddingX="20" paddingY="12" gap="8" vertical="center">
      <Avatar size="xs" src="/images/avatar.jpg"/>
      <Text variant="label-default-s">Lorant One</Text>
    </Row>
    <Media
      border="neutral-alpha-weak"
      sizes="400px"
      fillWidth
      aspectRatio="4 / 3"
      radius="l"
      alt="Proxima b"
      src="/images/docs/once-ui/proxima-b.jpg"
    />
    <Column fillWidth paddingX="20" paddingY="24" gap="8">
      <Text variant="body-default-xl">Proxima b</Text>
      <Text onBackground="neutral-weak" variant="body-default-s">
        A planet so cruel on the surface, but once you explore what's underneath, you'll question
        everything you know. Yet, you vibe with it.
      </Text>
    </Column>
    <Line background="neutral-alpha-medium" />
    <Row
      paddingX="20" paddingY="12" gap="8" vertical="center"
      textVariant="label-default-s" onBackground="neutral-medium"
    >
      <Icon name="like" size="s" onBackground="neutral-strong" />
      34
      <Icon name="chat" size="s" onBackground="neutral-strong" marginLeft="24" />
      5
    </Row>
  </Card>
</Row>

Selected

Use selected to mark the chosen card in a set — a plan picker, a template gallery, a multi-select list. It repaints the border and background from the brand scheme, and a card that is also clickable announces the state as a pressed toggle. Both colours are defaults, so passing background or border still wins.

Selected

ProEverything, unlimited

StarterOne project

<Card selected onClick={() => setPlan("pro")}>
  Pro
</Card>
<Card selected={false} onClick={() => setPlan("starter")}>
  Starter
</Card>

API reference

Prop	Type	Default
children	React.ReactNode	—
href Makes it a link.	string	—
onClick Makes it a button. Without either, it is a static panel and a Column may suit better.	() => void	—
fillHeight Fill the parent's height, for cards that should match in a row.	boolean	—
selected Mark as the chosen one in a set. Repaints the border and background, and announces a clickable card as a pressed toggle.	boolean	—
style	React.CSSProperties	—
className	string	—
…and every FlexProps prop	inherited	—