8.2.3 #Templates.layout.multi-column Multi column
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.
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