Card

Purpose

The card utiltiy class sets the padding and radius dynamically depending on the card width.
See the table with styles for each width in Card patterns.

Basic example

Set grn-card-container class on the container that controls the width.
Set grn-card class on the nested element that has the padding and radius.

    <Box
      className="grn-card-container"
      maxWidth={50}
    >
      <Box 
        className="grn-card"
        padding="var(--grn-card-padding)"
        radius="var(--grn-card-radius)"
        shadow="s"
        borderSide="all"
      >
        {demoText.m}
      </Box>
    </Box>
  

Styles on multiple elements

In some cases we need to set the radius on the outer wrapper and the padding on an inner section.
We can separately assign the padding and radius to different elements.

    <Box
      className="grn-card-container"
      maxWidth={30}
    >
      <Box
        className="grn-card"
        radius="var(--grn-card-radius)"
        overflow="hidden"
        shadow="s"
        borderSide="all"
      >
        <Box
          backgroundColor="background3"
          aspectRatio="2"
        />
        <Box
          borderSide="top"
          padding="var(--grn-card-padding)"
        >
          {demoText.s}
        </Box>
      </Box>
    </Box>
  

Fallback

This utility has a fallback for browsers that don't support CSS container queries, in which case it will set the padding and radius of the third breakpoint in Card patterns.

This uses the graceful degradation approach.