COMPONENTS

Card

Cards display content or actions related to a single subject.

card-intro

Card is built to be modular and flexible. There are three core sections — Header, Body and Footer. Each of these sections can hold the pre-styled text sub-components (card title, card subtitle, card text) or other content including tables, grids, data visualization, buttons, links, forms, etc.

card-anatomy
  1. Card Container
  2. Card Image
  3. Card Header
  4. Card Body
  5. Card Footer
  6. Elevation

Card has three content styles — product, marketing and brand, with product being the default. The content style controls several of the default settings on the card styles, including padding and typography. Styles are meant to be used independently and should not be mixed and matched or used together in a layout.

Note: Style type is a design-only feature. The current GS UI Toolkit default style for card text is the product style. We are working towards including the other style types in a future version. Until then, typography styles can be edited using the Text and Heading components.

The Product style cards are a bolder option optimized for use in data-driven applications and dashboards. By default they use a bolder weight for headings and a button for any action.

Cards Product Style

The Marketing style cards are designed for informational pages and websites. They have a lighter visual appearance than the other styles. By default they use a lighter weight for headings and a text link style for actions.  By default the card title uses Basis, our alternate sans-serif font for headings.

Cards Marketing Style

The Editorial style cards are designed for messaging and content that is editorial in nature. These cards are larger and should be used sparingly in layouts to draw attention to key aspects of the content. By default the card title uses Sabon, our serif font, and the content is typically centered.

Cards Editorial Style
Dont mix card styles

DON'T: Mix and match card style types within one interface.

Elevation helps to provide separation from the background and can be used to indicate when a card is clickable. Elevation settings are available as tokens within the design system and elevation-00 through elevation-04 are recommended for cards. By default the Card component uses elevation-02 and elevation-04 is recommended for indicating that a card is clickable. Learn more in the Elevation guidelines.

Elevation specifications

A border can be applied to the card container. It is recommended to only use border when the card has no elevation.

Border specifications

Surface is the background of a component. The card can have three surface colors — none, primary (white) or secondary (gray 010).

Card Surface

Note: Surface color is currently a design-only property. The GS UI Toolkit supports the primary surface color. Only primary surface color can be used today in UI Toolkit. We are working towards releasing a surface property in a future update.

Card images are built to fill the width of the card and proportionally scale the height of the images. It is recommended have images span the full width of the card, or full bleed. If padding is needed, then placing inside of the Card Body will add the proper padding.

Card Image

Cards can have a vertical or horizontal image orientation.

Orientation

Note: Horizontal orientation is not yet supported in GS UI Toolkit. We are working towards releasing this property in a future update.

Alignment controls the elements within the card and can be set to either left or center or right. Generally, text alignment should match content alignment, except when actions use right alignment as card text will rarely be right aligned.

Card Content Alignment

Card typography has three styled text sub-components — card title, card subtitle, card body. Each sub-component has one default style for the card type product, marketing or editorial. These are the recommended styles, but custom overrides can be done when needed.

Card Title

Subtitle can also be used in different areas of the card depending on labeling needs. Link styling can be added as well for clickable text.

Card subtitle

Calls to action can be displayed on cards with Buttons, Links or Icon components. Any styling properties can be carried through from the components.

Actions - product style
Actions - marketing style
Actions - editorial style

The entire card can be set to be clickable. Interactive state can be indicated through a change in elevation or a change in border.

Clickable cards

Cards can be displayed in large, medium and small sizes.

Sizes - product style
Sizes - product style
Sizes - product style
card-basic
Examples - marketing style
Examples - Editorial Style
  • Don't put too much content in a card. Cards are designed for a quick scan about a single topic.
  • Use character counts to keep cards a uniform size.
cards alignment do

DO: Aim to have cards grouped together of similar size and content length. Use character and word count to control for the length of the cards in the same row.

Cards stagger do

DO: Use a masonry layout instead of a uniform grid if card content will create cards of a different length.

Cards  align dont

DON'T: Try to make a uniform grid by extending the bottom of cards in the same row to match a card of a different length.

Cards stagger dont

DON'T: Use leave gaps between rows of cards.