<h2>Nested sections</h2>

<div class="preview-inner-container">
    <h3>Example: Highlighted section inside accent section</h3>
    <div class="section--accent" style="padding: 20px;">
        <h2>Accent region title</h2>
        <button class="btn btn--large ">Button</button>
        <p class="">Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu
            ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.</p>

        <div class="section--highlighted" style="padding: 20px; margin: 20px;">
            <h2>Highlighted region title</h2>
            <p class="">Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu
                ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.</p>
            <button class="btn btn--large ">Button</button>
        </div>
    </div>
</div>

<div class="preview-inner-container">
    <h3>Example: Inverse section inside default section</h3>
    <div class="section--inverse" style="padding: 20px;">
        <h2>Accent region title</h2>
        <button class="btn btn--large ">Button</button>
        <p class="">Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu
            ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.</p>

        <div class="section--default" style="padding: 20px; margin: 20px;">
            <h2>Highlighted region title</h2>
            <button class="btn btn--large ">Button</button>
            <p class="">Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu
                ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.</p>
        </div>
    </div>
</div>

<div class="preview-inner-container">
    <h3>Example: Wrapper section inside highlighted section</h3>
    <div class="section--highlighted" style="padding: 20px;">
        <h2>Accent region title</h2>
        <button class="btn btn--large ">Button</button>
        <p class="">Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu
            ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.</p>

        <div class="section--wrapper" style="padding: 20px; margin: 20px;">
            <h2>Highlighted region title</h2>
            <button class="btn btn--large ">Button</button>
            <p class="">Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu
                ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.</p>
        </div>
    </div>
</div>
<h2>Nested sections</h2>

<div class="preview-inner-container">
  <h3>Example: Highlighted section inside accent section</h3>
  <div class="section--accent" style="padding: 20px;">
    {% include '@h2'with { 'h2_text': 'Accent region title' } %}
    {% include '@button-lg' with { 'text': 'Button' } %}
    {% include '@paragraph' with { 'text': 'Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.' } %}

    <div class="section--highlighted" style="padding: 20px; margin: 20px;">
      {% include '@h2'with { 'h2_text': 'Highlighted region title' } %}
      {% include '@paragraph' with { 'text': 'Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.' } %}
      {% include '@button-lg' with { 'text': 'Button' } %}
    </div>
  </div>
</div>

<div class="preview-inner-container">
  <h3>Example: Inverse section inside default section</h3>
  <div class="section--inverse" style="padding: 20px;">
    {% include '@h2'with { 'h2_text': 'Accent region title' } %}
    {% include '@button-lg' with { 'text': 'Button' } %}
    {% include '@paragraph' with { 'text': 'Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.' } %}

    <div class="section--default" style="padding: 20px; margin: 20px;">
      {% include '@h2'with { 'h2_text': 'Highlighted region title' } %}
      {% include '@button-lg' with { 'text': 'Button' } %}
      {% include '@paragraph' with { 'text': 'Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.' } %}
    </div>
  </div>
</div>

<div class="preview-inner-container">
  <h3>Example: Wrapper section inside highlighted section</h3>
  <div class="section--highlighted" style="padding: 20px;">
    {% include '@h2'with { 'h2_text': 'Accent region title' } %}
    {% include '@button-lg' with { 'text': 'Button' } %}
    {% include '@paragraph' with { 'text': 'Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.' } %}

    <div class="section--wrapper" style="padding: 20px; margin: 20px;">
      {% include '@h2'with { 'h2_text': 'Highlighted region title' } %}
      {% include '@button-lg' with { 'text': 'Button' } %}
      {% include '@paragraph' with { 'text': 'Nunc placerat sit amet velit non posuere. Phasellus commodo molestie urna, quis rhoncus lacus malesuada quis. Aenean semper sem a leo hendrerit facilisis. Nullam consectetur ipsum molestie turpis lacinia eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam non lorem id velit ultrices convallis. Nam a aliquet sem, a fringilla nunc.' } %}
    </div>
  </div>
</div>
{
  "items": [
    "<a href='#'>Stad.gent</a>",
    "<a href='#'>Overview</a>",
    "<span>Overview</span>",
    "<span>Overview</span>",
    "<span>Page title</span>"
  ]
}

There are no notes for this item.