Card

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<div style={{ maxWidth: '20rem', margin: '0 auto' }}> <Card> <Typography block variant={{ size: 'eyebrow' }}> Eyebrow </Typography> <Box vertical={2}> <Typography block variant={{ size: 'h1' }}> Connecting with the community </Typography> <Box> <Typography> Example content only. Edit the text and the height will adjust automatically. Resize the width and the content will expand accordingly. </Typography> <Box top={4}> <Button onPress={noop} variant={{ priority: 'high', width: 'full' }}> Sign up </Button> </Box> </Box> </Box> </Card> </div>

<div style={{ maxWidth: '20rem', margin: '0 auto' }}>
  <Card>
    <Typography block variant={{ size: 'eyebrow' }}>
      Eyebrow
    </Typography>
    <Box vertical={2}>
      <Typography block variant={{ size: 'h1' }}>
        Connecting with the community
      </Typography>
      <Box>
        <Typography>
          Example content only. Edit the text and the height will adjust automatically. Resize the
          width and the content will expand accordingly.
        </Typography>
        <Box top={4}>
          <Button onPress={noop} variant={{ priority: 'high', width: 'full' }}>
            Sign up
          </Button>
        </Box>
      </Box>
    </Box>
  </Card>
</div>

Introduction

import { Card } from '@telus-uds/ds-allium'

Cards are content containers with varying styles and predetermined padding.

Guidance

• 2 different backgrounds: default, alternative
• 5 different padding options
  • 3 predetermined, responsive padding (default, narrow, intermediate)
  • 1 predetermined, applies to all viewports (compact)
  • 1 custom
• With/without footer
  • Footer will maintain variant’s padding by default, but it can be overridden via a dedicated footerPadding prop accepting an object with the following padding tokens:
    • paddingBottom
    • paddingLeft
    • paddingRight
    • paddingTop
• With/without a full bleed image
  • In cases where a full bleed image is desired, use the fullBleedContent property of the Card component.
  • If passing a fullBleedContent property, use the src (or multiple sources for ResponsiveImage, or a custom fullBleedContent), alt tag, and position prop to control the image appearance.
  • Position can be passed as one of the following words: 'left', 'right', 'top', or 'bottom', depending on where in the Card you would like the image to be
  • If the image won't always fill the available space, its alignment may be set with an align prop of 'start', 'center' or 'end'

Accessibility

No accessibility notes.

Platform considerations

This component is currently only supported on web.

A basic Card with Allium theming is available for native apps from @telus-uds/components-base. This one only takes the theming props, tokens and variant, and only applies Card-like styling. The additional features documented here (e.g. full bleed content) are built on top of that base Card and oriented to web design patterns; native app projects may use the base Card to build their own Card components in a similar way, oriented around project-relevant app design patterns.

Figma

Props

Name	Type	Default	Description
children	node		Card content.
footer	node		Card footer.
footerPadding	paddingProp		Custom card footer padding.
fullBleedContent	{ position, align }		Full bleed content to be placed on the card.
fullBleedImage	{ position, align }		Full bleed image to be placed on the card, deprecated in favor of 'fullBleedContent'. @deprecated
tokens	custom		System tokens prop, see tokens for more details
variant	variantProp		System variant prop, see variants for more details

Variants

Alternative background

Loading...

<Card variant={{ background: 'alternative' }}> <Typography>A different colour background</Typography> </Card>

<Card variant={{ background: 'alternative' }}>
  <Typography>A different colour background</Typography>
</Card>

With footer

Loading...

<Card footer={ <Typography> At TELUS, we’re building a better future for all Canadians by using our technology for good and giving back to our communities. </Typography> } > <Typography block variant={{ size: 'eyebrow' }}> Eyebrow </Typography> <Box vertical={2}> <Typography block variant={{ size: 'h1' }}> Connecting with the community </Typography> </Box> <Typography> Example content only. Edit the text and the height will adjust automatically. Resize the width and the content will expand accordingly. </Typography> </Card>

<Card
  footer={
    <Typography>
      At TELUS, we’re building a better future for all Canadians by using our technology for good
      and giving back to our communities.
    </Typography>
  }
>
  <Typography block variant={{ size: 'eyebrow' }}>
    Eyebrow
  </Typography>
  <Box vertical={2}>
    <Typography block variant={{ size: 'h1' }}>
      Connecting with the community
    </Typography>
  </Box>
  <Typography>
    Example content only. Edit the text and the height will adjust automatically. Resize the width
    and the content will expand accordingly.
  </Typography>
</Card>

With footer and custom padding

Loading...

<Card footer={ <Typography> At TELUS, we’re building a better future for all Canadians by using our technology for good and giving back to our communities. </Typography> } variant={{ padding: 'custom' }} tokens={{ paddingBottom: 48, paddingLeft: 32, paddingRight: 32, paddingTop: 40 }} footerPadding={{ paddingBottom: 72, paddingLeft: 40, paddingRight: 40, paddingTop: 64 }} > <Typography block variant={{ size: 'eyebrow' }}> Eyebrow </Typography> <Box vertical={2}> <Typography block variant={{ size: 'h1' }}> Connecting with the community </Typography> </Box> <Typography> Example content only. Edit the text and the height will adjust automatically. Resize the width and the content will expand accordingly. </Typography> </Card>

<Card
  footer={
    <Typography>
      At TELUS, we’re building a better future for all Canadians by using our technology for good
      and giving back to our communities.
    </Typography>
  }
  variant={{ padding: 'custom' }}
  tokens={{
    paddingBottom: 48,
    paddingLeft: 32,
    paddingRight: 32,
    paddingTop: 40
  }}
  footerPadding={{
    paddingBottom: 72,
    paddingLeft: 40,
    paddingRight: 40,
    paddingTop: 64
  }}
>
  <Typography block variant={{ size: 'eyebrow' }}>
    Eyebrow
  </Typography>
  <Box vertical={2}>
    <Typography block variant={{ size: 'h1' }}>
      Connecting with the community
    </Typography>
  </Box>
  <Typography>
    Example content only. Edit the text and the height will adjust automatically. Resize the width
    and the content will expand accordingly.
  </Typography>
</Card>

With full bleed image

Responsive positioning is supported.

Loading...

<Card fullBleedContent={{ alt: 'Full Bleed Image Example', position: { xl: 'left', lg: 'right', md: 'bottom', sm: 'top', xs: 'none' }, align: { xl: 'end', lg: 'center' }, src: '/allium-design-system/img/pigs-allium-lo.png' }} > <Typography block variant={{ size: 'eyebrow' }}> Eyebrow </Typography> <Box vertical={2}> <Typography block variant={{ size: 'h1' }}> Connecting with the community </Typography> </Box> <Typography> Example content only. Edit the text and the height will adjust automatically. Resize the width and the content will expand accordingly. </Typography> </Card>

<Card
  fullBleedContent={{
    alt: 'Full Bleed Image Example',
    position: { xl: 'left', lg: 'right', md: 'bottom', sm: 'top', xs: 'none' },
    align: { xl: 'end', lg: 'center' },
    src: '/allium-design-system/img/pigs-allium-lo.png'
  }}
>
  <Typography block variant={{ size: 'eyebrow' }}>
    Eyebrow
  </Typography>
  <Box vertical={2}>
    <Typography block variant={{ size: 'h1' }}>
      Connecting with the community
    </Typography>
  </Box>
  <Typography>
    Example content only. Edit the text and the height will adjust automatically. Resize the width
    and the content will expand accordingly.
  </Typography>
</Card>

A footer can also be used with a full bleed image.

Loading...

<Card fullBleedContent={{ alt: 'Full Bleed Image Example', position: 'bottom', src: '/allium-design-system/img/pigs-allium-lo.png' }} footer={ <Typography> At TELUS, we’re building a better future for all Canadians by using our technology for good and giving back to our communities. </Typography> } > <Typography block variant={{ size: 'eyebrow' }}> Eyebrow </Typography> <Box vertical={2}> <Typography block variant={{ size: 'h1' }}> Connecting with the community </Typography> </Box> <Typography> Example content only. Edit the text and the height will adjust automatically. Resize the width and the content will expand accordingly. </Typography> </Card>

<Card
  fullBleedContent={{
    alt: 'Full Bleed Image Example',
    position: 'bottom',
    src: '/allium-design-system/img/pigs-allium-lo.png'
  }}
  footer={
    <Typography>
      At TELUS, we’re building a better future for all Canadians by using our technology for good
      and giving back to our communities.
    </Typography>
  }
>
  <Typography block variant={{ size: 'eyebrow' }}>
    Eyebrow
  </Typography>
  <Box vertical={2}>
    <Typography block variant={{ size: 'h1' }}>
      Connecting with the community
    </Typography>
  </Box>
  <Typography>
    Example content only. Edit the text and the height will adjust automatically. Resize the width
    and the content will expand accordingly.
  </Typography>
</Card>

You can also render any content full bleed-style by passing some JSX to the content field of the fullBleedContent prop:

Loading...

<Card fullBleedContent={{ alt: 'Full Bleed Image Example', position: 'bottom', content: ( <OptimizeImage contentfulAssetUrl="https://images.ctfassets.net/3cqlnin176yn/1GfIHDOb3n3uO3wVnKjHZ2/3a3c59c5caa91a315da1b3804cdf0b1b/Alpaca-lets-make-the-future-friendly-Hero-Banner-Tile.jpg" alt="alpacas" /> ) }} > <Typography block variant={{ size: 'eyebrow' }}> Eyebrow </Typography> <Box vertical={2}> <Typography block variant={{ size: 'h1' }}> Connecting with the community </Typography> </Box> <Typography> Example content only. Edit the text and the height will adjust automatically. Resize the width and the content will expand accordingly. </Typography> </Card>

<Card
  fullBleedContent={{
    alt: 'Full Bleed Image Example',
    position: 'bottom',
    content: (
      <OptimizeImage
        contentfulAssetUrl="https://images.ctfassets.net/3cqlnin176yn/1GfIHDOb3n3uO3wVnKjHZ2/3a3c59c5caa91a315da1b3804cdf0b1b/Alpaca-lets-make-the-future-friendly-Hero-Banner-Tile.jpg"
        alt="alpacas"
      />
    )
  }}
>
  <Typography block variant={{ size: 'eyebrow' }}>
    Eyebrow
  </Typography>
  <Box vertical={2}>
    <Typography block variant={{ size: 'h1' }}>
      Connecting with the community
    </Typography>
  </Box>
  <Typography>
    Example content only. Edit the text and the height will adjust automatically. Resize the width
    and the content will expand accordingly.
  </Typography>
</Card>

Groups of Card components

Multiple Card components may be laid out in a stacking component to give users a selection of articles.

This is an example of three Cards in a responsive StackView that flips from horizontal to vertical based on viewport:

import { Card, StackView } from '@telus-uds/ds-allium'

Loading...

<StackView direction={{ xs: 'column', md: 'row' }} space={{ xs: 2, lg: 3 }}> <Card>Short content</Card> <Card>A card with somewhat longer content</Card> <Card>A card with a much longer content that wraps over more lines, expanding the card</Card> </StackView>

<StackView direction={{ xs: 'column', md: 'row' }} space={{ xs: 2, lg: 3 }}>
  <Card>Short content</Card>
  <Card>A card with somewhat longer content</Card>
  <Card>A card with a much longer content that wraps over more lines, expanding the card</Card>
</StackView>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support