6 templates Templates

Source: 00-config/_variables.scss, line 33

6.1 templates.regions Regions

Toggle example guides Toggle HTML markup

We have split up the layout of the interface into regions. In Drupal we can assign blocks to these regions. Each region can contain different views/blocks/elements, based on the context of the node or page.

Example
Header

Blocks: Primary navigation, user navigation, site search

The header is always present. It holds a navbar component and the logo.

Breadcrumbs

Pathway navigation for large screen and 'go back' navigation for mobile

Hero

Provides a summary of the main content of this page, for example a person, a group or an event.

Secondary navigation

Navigation options to the sub contents of a main content.

Content top

Region to place content blocks above the main content. There are no blocks placed here by default.

Main content

Content about this section

Complementary top

Complementary content, filters, actions, quick navigations that is specific to the section. On mobile this region will be placed on top of the Main content, possibly in a different appearance such as with an off-canvas component.

Complementary bottom

Complementary content like blocks that is specific to the section. On mobile this region will be placed below the Main content, or it can be hidden. For placing the block we use a script that relocates the this region inside the Complementary top. The script is loaded via the responsive-dom library.

Content bottom

Region to place content blocks below the main content. There are no blocks placed here by default.

Footer

It is static and contains information about the whole application.

Header

Hero

Secondary navigation

Content top

Complementary top

Page title

Main content

Complementary bottom

Content bottom

Footer

Markup
  
Header

Blocks: Primary navigation, user navigation, site search

The header is always present. It holds a navbar component and the logo.

Breadcrumbs

Pathway navigation for large screen and 'go back' navigation for mobile

Hero

Provides a summary of the main content of this page, for example a person, a group or an event.

Secondary navigation

Navigation options to the sub contents of a main content.

Content top

Region to place content blocks above the main content. There are no blocks placed here by default.

Main content

Content about this section

Complementary top

Complementary content, filters, actions, quick navigations that is specific to the section. On mobile this region will be placed on top of the Main content, possibly in a different appearance such as with an off-canvas component.

Complementary bottom

Complementary content like blocks that is specific to the section. On mobile this region will be placed below the Main content, or it can be hidden. For placing the block we use a script that relocates the this region inside the Complementary top. The script is loaded via the responsive-dom library.

Content bottom

Region to place content blocks below the main content. There are no blocks placed here by default.

Footer

It is static and contains information about the whole application.

Header

Hero

Secondary navigation

Content top

Complementary top

Page title

Main content

Complementary bottom

Content bottom

Footer

Source: 05-templates/layout/layout.scss, line 1