39 #sections Section

Section component.

The section component is used to wrap block of contents. Its implementation ensures the correct vertical spacing between different groups of contents, it uses the margin collapse mechanism (css2) so that you don't have to worry when you place two sections one after the other, only one of the two margins will be applied, indeed.

It can contain different set of html elements and components, but the predefined ones are its unique element {section group}, the {listing wrapper}, the {sidebar-field-group}.

The way it works is that the first {section group} in the section doesn't get any margin (the parent is already defining that) while the last doesn't get the margin-bottom (still for the same reason). When there's only one {section group} element it doesn't get any vertical margin. Please do not reset any of these margins.

Mind that there is also a .section__group--full-width modifier which is not demoed here, it works when the section is not wrapped into a width limiting container.

Example
This is a random element preceding the section component, the margin below is given by the section

First child section__group element

Section__group element

Last child section__group element

Single child section__group element

This is a random element following the section component, the upper margin is given by the section 
<div class="section-styleguide-random">
This is a random element preceding the section component, the margin below is given by the section
</div>

<div class="row">
  <div class="section section-styleguide">
    <div class="section__group section__group-styleguide">
      <p>First child section__group element</p>
    </div>
  </div>
</div>

<div class="row">
  <div class="section section-styleguide">
    <div class="section__group section__group-styleguide">
       <p>Section__group element</p>
    </div>
    <div class="section__group section__group-styleguide">
       <p>Last child section__group element</p>
    </div>
  </div>
  <div class="section section-styleguide">
    <div class="section__group section__group-styleguide">
      <p>Single child section__group element</p>
    </div>
  </div>
</div>

<div class="section-styleguide-random">
  This is a random element following the section component, the upper margin is given by the section
</div>

39.1 #sections.1 section__group--row-two modifier

.section__group--row-two

Example

EU budget explained

EU budget for results web app

A selection of EU-funded projects.

Multiannual Financial Framework 2014-2020

Explanation of the EU long-term spending plan.

Data and figures about the EU budget

Information on the annual budget life-cycle.

EU expenditure and revenue 2014-2020

Guide to receiving EU funding

EU budget explained

EU budget for results web app

A selection of EU-funded projects.

Multiannual Financial Framework 2014-2020

Explanation of the EU long-term spending plan.

Data and figures about the EU budget

Information on the annual budget life-cycle.

EU expenditure and revenue 2014-2020

Guide to receiving EU funding 

<div class="row">
  <div class="section">
    <div class="section__group section__group--row-two">
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="EU budget explained">EU budget explained</a>
                </h3>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="EU budget for results web app">EU budget for results web app</a>
                </h3>
                <p>A selection of EU-funded projects.</p>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="Multiannual Financial Framework 2014-2020">Multiannual Financial Framework 2014-2020</a>
                </h3>
                <p>Explanation of the EU long-term spending plan.</p>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="Data and figures about the EU budget">Data and figures about the EU budget</a>
                </h3>
                <p>Information on the annual budget life-cycle.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="EU expenditure and revenue 2014-2020">EU expenditure and revenue 2014-2020</a>
                </h3>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="Guide to receiving EU funding">Guide to receiving EU funding</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="section">
    <div class="section__group section__group--row-two">
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="EU budget explained">EU budget explained</a>
                </h3>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="EU budget for results web app">EU budget for results web app</a>
                </h3>
                <p>A selection of EU-funded projects.</p>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="Multiannual Financial Framework 2014-2020">Multiannual Financial Framework 2014-2020</a>
                </h3>
                <p>Explanation of the EU long-term spending plan.</p>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="Data and figures about the EU budget">Data and figures about the EU budget</a>
                </h3>
                <p>Information on the annual budget life-cycle.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="EU expenditure and revenue 2014-2020">EU expenditure and revenue 2014-2020</a>
                </h3>
              </div>
            </div>
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="Guide to receiving EU funding">Guide to receiving EU funding</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

39.2 #sections.2 section__group--row-three modifier

.section__group--row-three

Example

EU budget explained

Data and figures about the EU budget

Information on the annual budget life-cycle.

EU expenditure and revenue 2014-2020

Guide to receiving EU funding

EU budget explained

EU budget for results web app

A selection of EU-funded projects.

Multiannual Financial Framework 2014-2020

Explanation of the EU long-term spending plan.

<div class="row">
  <div class="section">
    <div class="section__group section__group--row-three">
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="">EU budget explained</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">Data and figures about the EU budget</h3>
                <p>Information on the annual budget life-cycle.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="">EU expenditure and revenue 2014-2020</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">Guide to receiving EU funding</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="">EU budget explained</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="">EU budget for results web app</a>
                </h3>
                <p>A selection of EU-funded projects.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section__item">
        <div class="listing__wrapper listing__wrapper--default listing--line-left listing--teaser__wrapper">
          <div class="listing listing--teaser">
            <div class="listing__item">
              <div class="listing__column-main column-main">
                <h3 class="listing__title">
                  <a href="#" title="">Multiannual Financial Framework 2014-2020</a>
                </h3>
                <p>Explanation of the EU long-term spending plan.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

39.3 #sections.3 Section group modifiers

Examples
.section__group--highlight-grey
Highlighted section group element in grey
.section__group--highlight-grey-lightest
Highlighted section group element in light grey
.section__group--highlight-yellow
Highlighted section group element in yellow
.section__group--highlight-bluish
Highlighted section group element in a bluish grey
.section__group--no-margin
Section group with no margins 
<div class="row">
  <div class="section">
    <div class="section__group [modifier class] section__group--full-width">
      <div class="listing__wrapper listing__wrapper--row-two">
        <ul class="listing--title listing listing--no-border">
          <li class="listing__item">
            <h3 class="listing__title">
              <a href="#" title="">Ab aspernatur at dolor dolorem doloremque error exercitationem id non quidem quisquam.</a>
            </h3>
          </li>
          <li class="listing__item">
            <h3 class="listing__title">Architecto at deserunt, distinctio, eaque eos est et facere facilis.</h3>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>