Branding & Style Guide

6.1 layout.sidebars-both Sidebars Both

Toggle example guides Toggle HTML markup

Sidebars Both region styling, demonstrating ordering and stacking at narrower breakpoints. This shows default spacing.

Example

Content

Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa chups.

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy fruitcake.

Cookie chocolate croissant cake bear claw chocolate bar gingerbread marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding jelly.

Markup: layout/sidebars-both.twig
<div class="body-sidebars-both grid-container">

  <aside class="sidebar-first" style="background: rgba(255,228,196,0.5);">    
    <h3>Sidebar First</h3>
    <p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar.</p>
  </aside>


  <section id="content" style="background: rgba(222, 184, 135, 0.5);">
    <h3>Content</h3>
    <p>Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.</p>
    <p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
    dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie
    roll jujubes.</p>
    <p>Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder
    chocolate cake pudding. Cotton candy fruitcake jelly beans cake. Marshmallow
    jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy
    ice cream cake gummi bears lollipop powder brownie. Jelly gingerbread danish
    tiramisu carrot cake sweet danish caramels cookie. Sesame snaps cake pudding
    sugar plum tootsie roll pie liquorice. Gummies powder lemon drops candy
    canes brownie powder oat cake. Chocolate cake bonbon cookie cotton candy
    fruitcake.</p>
    <p>Cookie chocolate croissant cake bear claw chocolate bar gingerbread
    marshmallow apple pie. Muffin candy sweet dessert cotton candy pudding
    jelly.</p>
  </section>


  <aside class="sidebar-second" style="background: rgba(250, 235 ,215, 0.5);">
    <h3>Sidebar Second</h3>
    <p>Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon
    croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar.</p>
  </aside>


</div>

<!-- CSS Grid Column Demos -->
<div class="body-sidebars-both grid-container columndemocontainer">
    <div class="columndemo" id="cd01"></div>
    <div class="columndemo" id="cd02"></div>
    <div class="columndemo" id="cd03"></div>
    <div class="columndemo" id="cd04"></div>
    <div class="columndemo" id="cd05"></div>
    <div class="columndemo" id="cd06"></div>
    <div class="columndemo" id="cd07"></div>
    <div class="columndemo" id="cd08"></div>
    <div class="columndemo" id="cd09"></div>
    <div class="columndemo" id="cd10"></div>
    <div class="columndemo" id="cd11"></div>
    <div class="columndemo" id="cd12"></div>
</div>
<!-- End CSS Grid Column Demos -->
Source: sass/layout/_sidebars.scss, line 1