General content patterns

General content patterns exemplify how general content and/or most pages within a website can be structured through the use of different resets, utilities, and components within different page layout areas.


The basic general content pattern is an example of a standard inner page of a website, with a main article with a card in the sidebar to highlight a key portion of the content.

Announcement & blockquote

Extending the basic general content pattern, the announcement/blockquote variant begins introducing more elements, such as lists and blockquotes to further organize the page's content.

Hero & accordion

The hero/accordion general content pattern further organizes the content by adding a feature hero component at the top of the page, removing the card component from the sidebar, and compartmentalizes the main article by putting some sections in an accordion component.

Vertical cards

The vertical cards general content pattern takes a more simplified approach to the hero/accordion variant's organization by ditching the feature hero component, adding back in a less prominant card to the sidebar, and compartmentalize the main article by putting some sections into different card components with images.