COMPONENTS
Card
Cards display content or actions related to a single subject.
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 Container
- Card Image
- Card Header
- Card Body
- Card Footer
- 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.
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.
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.
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.
A border can be applied to the card container. It is recommended to only use border when the card has no elevation.
Surface is the background of a component. The card can have three surface colors — none, primary (white) or secondary (gray 010).
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.
Cards can have a vertical or horizontal image 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 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.
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.
The entire card can be set to be clickable. Interactive state can be indicated through a change in elevation or a change in border.
A group of cards can be wrapped in a Drag and Drop container to allow for the cards to be reordered and sorted. See Drag and Drop Component for additional properties and guidance.
Cards can be displayed in large, medium and small sizes.
- 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.
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.
DO: Use a masonry layout instead of a uniform grid if card content will create cards of a different length.
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.
DON'T: Use leave gaps between rows of cards.
Contents