3.4.1 Card nested section

Toggle example guides Toggle HTML markup

To display a distinguished section in a card, you can used a inner wrapper with .card__nested-section. This will undo the padding and there is a subtle gray background color added.

Example

Content can be anything

Nested section content

Markup: 02-atoms/cards/card-nested-section.twig 
<section class="card">
  <div class="card__block">
    <p>Content can be anything</p>

    <div class="card__nested-section">
     <p>Nested section content</p>
    </div>
  </div>

</section>
Source: 02-atoms/cards/cards.scss, line 37