Cards / Panels

Cards, which have replaced panel components in Bootstrap, are flexible, extensible content containers.

Reference: https://getbootstrap.com/docs/4.0/components/card/

Basic

A panel, also known as a card, is a sheet of material that serves as an entry point to more detailed information. Cards may contain a photo, text, and a link about a single subject. A card collection is a layout of cards on the same plane.

Buttons are best placed on the left side of a card to increase their visibility.

Reference: https://material.io/guidelines/components/cards.html

Learn more

To learn more visit Bootstrap's Cards documentation.
Basic card

Heading

Content
Content
Footer

Hoverable

Add the .card-hoverable class to any card to enable hover interactions.

Hoverable card

This card "raises" when the user hovers over it.
Footer

Sections

Panels / Cards which contain a large amount of content often need to be broken down into logical sections.

Do

Separate panel sections using adjacent sibling .card-body elements.

Heading

Name
Contact
Address
Footer

Do not

Nest cards within cards.

Heading

Name
Contact
Address
Footer

Contextual Alternatives

Containers can be more meaningful in particular contexts by applying alternative state classes, which include: primary, info, success, warning, and danger.

Reference: Adapted from http://www.uh.edu/marketing/web/bootstrap/components/panels/

Default Heading

Panel content
Panel footer

Primary Heading

Panel content
Panel footer

Info Heading

Panel content
Panel footer

Success Heading

Panel content
Panel footer

Warning Heading

Panel content
Panel footer

Danger Heading

Panel content
Panel footer

Expansion Group

An expansion group is created by wrapping .card elements within a .card-expansion-group container.

Also known as accordions.

A lightweight container that can stand alone or connect to a larger surface.

Reference: Adapted from https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage

One

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Cancel Save

Two

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Cancel Save

Three

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Cancel Save
Third-party Content Disclaimer