Panels, also known as cards, are flexible, extensible content containers.

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 Panels documentation.
Basic panel

Panel heading

Content
Content

Flat Panel

Make a panel flat on the base layer with the .panel-flat class.

Flat panel

This panel appears to be a part of the base layer.

Hoverable

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

Hoverable panel

This panel "raises" when the user hovers over it.

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 .panel-body elements.

Customer

Name
Contact
Address

Do not

Nest panels within panels.

Customer

Name
Contact
Address

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

Content

Primary Heading

Content

Info Heading

Content

Success Heading

Content

Warning Heading

Content

Danger Heading

Content

Expansion Group

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.
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.
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.