Inputs & Textarea
Pull to Refresh
React Grid Layout
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.
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.
Card text is used for any paragraph text within a card.
Depending on the content of the card and display needs, Card Title can be above or below the content and can be in the Card Header or the Card Body.
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.
Actions can use Buttons, Links or Icon components. Any styling properties can be carried through from the components.
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, placing inside of the Card Body will add the proper padding.
Cards can be displayed in large, medium and small sizes.
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.