Cards

Best Practices

• When a Card occurs outside a Content Container, it has a white background.
• When a Card occurs inside a Content Container it has a gray background.
• Titles or headers in Cards may need an appropriate Heading Level.
• Cards are flexible enough to accommodate most content types.
• A card’s width is determined by its parent element. This might be a <div> with a Bootstrap column class. Read Layout Grid for more information.
• Rows and columns can be placed inside a card body.
• Cards can be themed using theming classes. Read more in Agency Themes.
• Use Cards for browsing content.
• Use Tables for comparing data.

Usage

See the Pen Buttons Disabled by LA Gov Design Team (@lagovdesignteam) on CodePen.

Resources

• Bootstrap Documentation - Cards