Card

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

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={() => {}} 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={() => {}} variant={{ priority: 'high', width: 'full' }}>
            Sign up
          </Button>
        </Box>
      </Box>
    </Box>
  </Card>
</div>

Introduction

import { Card } from '@telus-uds/components-base'

Cards are content containers with varying styles and predetermined padding.

Guidance

Accessibility

No accessibility notes.

Props

Name	Type	Default	Description
children	node
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details