Branding & Style Guide

6.7 layout.sidebars-none-content Sidebars None Content

Toggle example guides Toggle HTML markup

Sidebars None 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-none-content.twig
<div class="body-sidebars-none sidebars-none-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-right media_image_half_width">
        <div class="imagefiller group">
            <div class="filler-content">
                Image — Half-Width Right 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>


</div>

<!-- CSS Grid Column Demos -->
<div class="body-sidebars-none 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 63