Styling

The Semantic Theme enables content editors to present content with additional visual aesthetics applied and without compromising accessibility.

Each block is stacked within a page context (list of blocks used by the theme templating). For example, this page has one main context and if there were a sidebar block placed on the page, there would be a sidebar context within the main context.

Editors have the ability to control the individual blocks and how they're visually presented alongside their contextual neighbours through the use of some common block attributes. This section of the site demonstrates the use of these common attributes.

The data-block-padding attribute regulates the top and bottom padding between the inner content section of the block and it's block boundary.

Use the link below to see a demonstration of all the different block padding configurations.

The data-block-margins attribute regulates the top and bottom margins separating the blocks within their context.

Use the link below to see a demonstration of all the different block margins configurations.

The data-block-profile attribute regulates how the overall block contains it's inner content and background coverage of the available space.

Use the link below to see a demonstration of all the different block profile configurations.