Branding & Style Guide

6.6 layout.sidebars-second-content Sidebar Second Content

Toggle example guides Toggle HTML markup

Sidebars Second Content – Used for content types with long-form text elements to improve readability in the main content area by limiting the paragraph width.

Example
Markup: layout/sidebars-second-content.twig
<div class="body-sidebars-second sidebars-second-content-demo grid-container">

  <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>
        <article class="align-left media_image_half_width">
            <div class="imagefiller group">
                <div class="filler-content">
                    Image — Half-Width Left Align
                </div>
            </div>
        </article>
        <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-second 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 53