Skip to main content

# 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

Breadcrumbs

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

              Breadcrumbs

              Hero

              Secondary navigation

              Content top

              Complementary top

              Page title
              Main content

                Complementary bottom

              Content bottom

              Footer

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