Card

Sticker Sheet Storybook

Example


<vega-card 
    padding="size-24" 
    margin="size-8"
    variant="shadow"
    background-color = 'bg-primary' 
>
        Content for the card goes here.
</vega-card>

Usage

The vega-card is a design tool for containing and displaying content on a page in a flexible container, which can help group together semantically related pieces of information. They are used in a wide variety of places within UX design.

They are used for grouping information, and typically will contain a summary and a link to additional information.

They have the following characteristics:

  • Content is presented in a way that all information on the page is not ranked; it contains a discrete set of information about a specific topic.
  • They are used when Content needs to stand out on a page.

Properties

Name Description Default
padding This specifies the padding within the card container. It can be set as ResponsiveType or any sizing token.
margin This specifies the margin for the card. It can be set as ResponsiveType or any sizing token
variant Sepcifies the shadow or border for the card
background-color This specifies the background color within the card container. It will accept any background color token.

All Properties

<vega-card
	padding='size-8|12|16 etc | {default: size-12, M: {top: size-16, bottom: size-16,...}, ...}.'
	margin='size-8|12|16 etc | {default: size-12, M: {top: size-16, bottom: size-16,...}, ...}.'
    variant='sshadow | border'
	background-color='bg-secondary etc.'
>
    Child elements
</vega-card>

For more details, view in Storybook.

Nesting

When nesting cards inside each other:

  • Shadows should only be applied to the outermost card. Shadow applied to any nested children is invalid.
  • Do not nest cards more than 2 layers, otherwise this will return an error to the console.

Accessibility

  • Ensures every id attribute value is unique.
  • Elements must have sufficient color contrast.

Best Practices

  • Cards are best used when content in different cards is heterogenous; they are unrelated to each other.
  • Cards are better suited for browsing information than as the results of a search.
  • Cards should be used if content is not intended to be ranked.
  • If users need to choose between multiple options, cards are best avoided, because they are not structured in a way that allows easy comparison.
  • Cards work best when they are used for a specific UI purpose, and not just for the look of the page.
  • Cards can be used as jumping-off points, as they typically will include a link to another location.
  • Keep cards simple; there should only be one concept or idea per card.
  • While cards themselves are not hierarchical with each other, content within them should be ordered in a way to direct the user to the most important piece of information.