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.

<i>The complementary_bottom region will be hidden on small screens.</i>

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.

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 hidden.

Sidebar first

To create a two column layout you can use the sidebar first region together with the conent region. This is a good layout when the content is both regions are of equal importance.

Sidebar second

On top of sidebar first you can also use sidebar second. This will create a 3 column layout where all columns have an equal share. On mobile sidebar second will come last, while on desktop it will be placed on the right.

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.

Markup: 05-templates/layout/regions.twig

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #E57373; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Header</h6>
    <p>Blocks: Primary navigation, user navigation, site search. The header is always present. It holds a navbar component and the logo.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #E6EE9C; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
  <h6 >Breadcrumbs</h6>
  <p>Pathway navigation for large screen and 'go back' navigation for mobile</p>
</span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #9575CD; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Hero</h6>
    <p>Provides a summary of the main content of this page, for example a person, a group or an event.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #FFE082; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6 >Secondary navigation</h6>
    <p >Navigation options to the sub contents of a main content.</p>
  </span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #FF8A65; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Content top</h6>
    <p>Region to place content blocks above the main content. There are no blocks placed here by default.</p>
  </span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #4DB6AC; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Content</h6>
    <p>Content about this section.</p>
  </span>
</div>

<div class="list-item">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #4DD0E1; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Complementary top</h6>
    <p>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.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #81C784; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Complementary bottom</h6>
    <p>Complementary content like blocks that is specific to the section. On mobile this region will be hidden.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #ec407a; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Sidebar first</h6>
    <p>To create a two column layout you can use the sidebar first region together with the conent region. This is a good layout when the content is both regions are of equal importance.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #ffe0b2; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Sidebar second</h6>
    <p>On top of sidebar first you can also use sidebar second. This will create a 3 column layout where all columns have an equal share. On mobile sidebar second will come last, while on desktop it will be placed on the right.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #DCE775; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Content bottom</h6>
    <p>Region to place content blocks below the main content. There are no blocks placed here by default.</p>
  </span>
</div>

<div class="list-item ">
  <span class="list-item__avatar list-item__avatar--medium">
    <div style="background-color: #64b5f6; width: 44px; height: 44px; border-radius: 50%;"></div>
  </span>
  <span class="list-item__text">
    <h6>Footer</h6>
    <p>It is static and contains information about the whole application.</p>
  </span>
</div>
Source: 05-templates/layout/layout.scss, line 1