district base

8.2.3 #Templates.layout.multi-column Multi column

Toggle example guides Toggle HTML markup

Defines a multi column layout by using the class .layout-multi-column--{n}

Example

This is a 3 column card layout

Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Lacinia quis vel eros donec ac odio tempor orci dapibus.

Card 1
Card 2
Card 3
Markup
<div class="layout-multi-column layout-multi-column--3">
  <div class=""><h3>This is a 3 column card layout</h3><p>Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Lacinia quis vel eros donec ac odio tempor orci dapibus.</p></div>
    <div class="field--name-field-cards">
      <div class="field__item">
        <div class="card paragraph paragraph__card paragraph--type-card teaser teaser--stacked">
          <div class="teaser__image">
            <a href="#"><img src="https://picsum.photos/600/400?random=1" width="600" height="400" class="image-style-card"></a>
          </div>
         <div class="teaser__main">
           Card 1
         </div>
       </div>
     </div>
     <div class="field__item">
       <div class="card paragraph paragraph__card paragraph--type-card teaser teaser--stacked">
         <div class="teaser__image">
            <a href="#"><img src="https://picsum.photos/600/400?random=1" width="600" height="400" class="image-style-card"></a>
         </div>
         <div class="teaser__main">
           Card 2
         </div>
       </div>
     </div>
  <div class="field__item">
    <div class="card paragraph paragraph__card paragraph--type-card teaser teaser--stacked">
      <div class="teaser__image">
        <a href="#"><img src="https://picsum.photos/600/400?random=1" width="600" height="400" class="image-style-card"></a>
     </div>
     <div class="teaser__main">
       Card 3
     </div>
   </div>
  </div>
 </div>
</div>
Source: docroot/themes/contrib/district_base/styles/scss/layouts/_layout-multi-column.scss, line 1