regions.twig in Open Social 8.7

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