Card

<Card
  sx={{
    alignItems: 'flex-start',
    backgroundColor: 'card.background',
    border: '1px solid',
    borderColor: 'border.default',
    borderRadius: '4px',
    display: 'flex',
    flexDirection: 'column',
    padding: 3,
    width: 'clamp(250px, 45%, 308px)'
  }}
>
  <Card.Content>
    <Card.Header>
      <Text
        as="h2"
        sx={{
          fontSize: 2,
          fontWeight: 'fontWeights.3'
        }}
      >
        Global Configuration
      </Text>
    </Card.Header>
    <Card.Body
      sx={{
        padding: '12px 0px'
      }}
    >
      <Text
        as="p"
        sx={{
          color: 'text.subtlest',
          fontSize: 2,
          fontWeight: 'normal',
          lineHeight: 'default'
        }}
      >
        Configure notifications, auto-refresh issues, showing transitions activity on issue views, and more.
      </Text>
    </Card.Body>
    <Card.Footer
      sx={{
        marginTop: 'auto',
        padding: '12px 0 6px 0'
      }}
    >
      <AtlasButton as="button" onClick={() => alert('Go to configiuration')}>
        Go to configuration
      </AtlasButton>
    </Card.Footer>
  </Card.Content>
</Card>

<Card
  as="article"
  sx={{
    backgroundColor: 'background.neutral.subtle.default',
    border: '1px solid',
    borderColor: 'border.default',
    borderRadius: 2,
    width: 'clamp(280px, 33.333%, 328px)'
  }}
>
  <Card.Media
    alt="A sea otter looks into the camera"
    src="https://static01.nyt.com/images/2021/07/08/science/08TB-OTTERS1/merlin_190551999_3680585e-dbdd-4bff-96ad-0d74d1239df8-jumbo.jpg?quality=75&auto=webp"
  />
  <Card.Content
    sx={{
      display: 'flex',
      flexDirection: 'column',
      gap: '32px',
      justifyContent: 'space-between',
      padding: 3
    }}
  >
    <Card.Header>
      <Text as="h5" color="text.subtlest" fontSize="2" fontWeight="normal">
        Animal of the day
      </Text>
      <Text as="h2" color="text.default" fontSize="5">
        Otter
      </Text>
    </Card.Header>
    <Card.Body>
      <Text as="p" color="text.subtle" fontSize="2">
        Otters have long, slim bodies and relatively short limbs. Their most striking anatomical features are the
        powerful webbed feet they use to swim, and their seal-like ability to hold their breath underwater.
      </Text>
    </Card.Body>
    <Card.Footer>
      <AtlasButton appearance={`primary`} as="button" onClick={function noRefCheck() {}}>
        Sponsor an Otter
      </AtlasButton>
      <AtlasButton
        appearance={`subtle-link`}
        as="a"
        href="https://www.doi.gov/blog/12-facts-about-otters-sea-otter-awareness-week"
        sx={{
          color: 'text.subtlest'
        }}
      >
        <span>
          <AkLightbulbIcon size={`small`} />
        </span>
        Learn more
      </AtlasButton>
    </Card.Footer>{' '}
  </Card.Content>
</Card>