Detail Page

Examples

The Detail template is useful when highlighting feature content in the interior of your project. The Detail template provides space for storytelling in article-like format below the fold. To extend the template, components can be used to change it from a product-centric design to a narrative style easily.

Header
Box
Card
Hero
Card
Card
Card
Footer
Header
Box
Card
Hero
Card
Footer
Header
Box
Card
Hero
Card
Footer

Components

Box

General purpose flexible box layout. This supports many, but not all, of the flexbox capabilities.

Card

An annotated summary of something. This could be used on a home/marketing page to provide snippets of content that the user can click through for more detail. Or, as search result items. All properties are optional and can be mixed and matched as needed.

Footer

Put things at the bottom.

Header

Combines Title and Menu elements responsively.

Hero

A Hero image or video, overlaid with text.

Quote

A quote with a colored border.

Section

A standard HTML5 section. It might contain a Heading, one or more Paragraphs, Images, and Videos.

Video

Video built on the HTML5 video element.