One Leeds Design System v2.0.0

Section Break: Green theme 2 items

Guidance

Please note that this component is part of the One Leeds Design System project (also known as DS2). It is currently intended for use in sandbox, development and test environments only and must not be implemented in production.

Working alongside the three tiered top navigation component, the section navigation component offers an extra level for splitting up page content.

These appear as items similar to accordions. Initially only the summary bar (with title) is presented. When this is clicked/selected then the section ‘opens’ to reveal content below.

As many section break components as required can be placed on a page, stacked on top of each other.

This component should be used instead of the secondary navigation where suitable. A page should not contain the section navigation component AND this section break component.

Developer guidance - sample config

The below config example shows a config example.

Sections: An array of items, each entry is one section break component. If more than one items are added to this array, the components stack on top of each other.

Title: Compulsory parameter. This should contain text only and appears in the summary bar. Note, this title is marked up as a H2 heading.

Theme: Optional parameter. For this release there are only two available themes (see below). These set the colour theme for this component. Further releases shall have more options. If let blank then a default monochrome theme is applied. Other theme options: green.

Content: HTML mark up. As the title is marked as a H2, the subsequent content (revealed when the component is selected) should start with a H3 heading (if a heading is required). Currently a H3 heading, a H5 heading and paragraph content is supported as per the below example.

'context': {
  'sections': [
    {
      'title': 'heading-xl',
      'theme': 'green',
      'content': `
        <h3>heading-l</h3>
        <h4>heading-m</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
{% for section in sections %}
  <details class="ds2-section-break {% if section.theme %}ds2-section-break--{{ section.theme }}{% endif %}" {% if not ungrouped %}name="grouped"{% endif %}>
    <summary class="ds2-section-break__summary">
      <h2 class="ds2-section-break__summary__inner">
        {{ section.title }}
      </h2>
    </summary>
    <div class="ds2-section-break__content">
      <div class="ds2-section-break__content__inner">
        {{ section.content | safe }}
      </div>
    </div>
  </details>
{% endfor %}
 
<details class="ds2-section-break ds2-section-break--green" name="grouped">
    <summary class="ds2-section-break__summary">
        <h2 class="ds2-section-break__summary__inner">
            heading-xl
        </h2>
    </summary>
    <div class="ds2-section-break__content">
        <div class="ds2-section-break__content__inner">

            <h3>heading-l</h3>
            <h4>heading-m</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sinmt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
    </div>
</details>

<details class="ds2-section-break ds2-section-break--green" name="grouped">
    <summary class="ds2-section-break__summary">
        <h2 class="ds2-section-break__summary__inner">
            heading-xl
        </h2>
    </summary>
    <div class="ds2-section-break__content">
        <div class="ds2-section-break__content__inner">

            <h3>heading-l</h3>
            <h4>heading-m</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sinmt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        </div>
    </div>
</details>
  • Content: 
    .ds2-section-break {

  // do all typography rules in separate base level component
  
  $ds2-content-size: 16px;
  $ds2-content-weight: normal;

  h2,h3,h4,h5 {
    font-family: uolSans, sans-serif;
  }

  .ds2-xl {
    font-size: 32px;
    line-height: 1.09;
    margin: 0 0 30px;

    @include media(">=uol-media-m") {
      font-size: 48px;
      line-height: 1.04;
      margin: 0 0 50px;
    }
  }

  .ds2-l {
    font-size: 27px;
    line-height: 1.11;
    margin: 0 0 20px;

    @include media(">=uol-media-m") {
      font-size: 36px;
      line-height: 1.11;
      margin: 0 0 30px;
    }
  }

  .ds2-m {
    font-size: 21px;
    line-height: 1.19;
    margin: 0 0 15px;

    @include media(">=uol-media-m") {
      font-size: 24px;
      line-height: 1.25;
      margin: 0 0 20px;
    }
  }

  .ds2-s {
    font-size: 19px;
    line-height: 1.32;
    margin: 0 0 15px;

    @include media(">=uol-media-m") {
      font-size: 19px;
      line-height: 1.32;
      margin: 0 0 20px;
    }
  }

  &:first-of-type {
    .ds2-section-break__summary {
      border-top: 1px solid $color-brand-black-20;
    }
  }
  &__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid $color-brand-black-20;
    
    h2 {
      @extend .ds2-xl;
      
      margin: 0 !important;
    }

    @include media(">=uol-media-l") {
      padding: 32px 48px;
    }
    
    cursor: pointer;

    &:before, &:after {
      content: "\2193";
      font-family: uolSans, sans-serif;
      font-size: 32px;
      display: block;
    }

    &:before {
      display: none;
      
      @include media(">=uol-media-l") {
        display: block;
      }
    }    
    
    &__inner {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      text-align: left;

      @include media(">=uol-media-l") {
        text-align: center;
      }
    }
  }

  &__content {
    padding: 24px;
    margin: 0 auto;
    
    @include media(">=uol-media-l") {
      padding: 68px 120px;
    }

    &__inner {
      max-width: 1440px;
      margin: 0 auto;

      h3 {
        @extend .ds2-l;
      }

      h4 {
        @extend .ds2-m;
      }

      h5 {
        @extend .ds2-s;
      }

      h3:first-of-type {
        margin-top: 0;
      }

      p:last-of-type {
        margin-bottom: 0;
      }
      
      p {
        font-family: uolInter, "Arial";
        font-size: $ds2-content-size;
        font-weight: $ds2-content-weight;
        line-height: 24px;
      }
    }
  }

  &[open] {
   .ds2-section-break__summary::before,
    .ds2-section-break__summary::after {
      transform: rotate(180deg);
    }
  }
}

// theme options

// default
.ds2-section-break {
  .ds2-section-break__summary {
    color: black;
    background-color: $color-brand-black-5;
  }
  .ds2-section-break__content {
    color: black;
    background-color: $color-brand-black-10;
  }
}

// green
.ds2-section-break--green {
  .ds2-section-break__summary {
    color: black;
    background-color: rgba($color-brand-vivid-green, 0.1);
  }
  .ds2-section-break__content {
    color: black;
    background-color: rgba($color-brand-vivid-green, 0.4);
  }
}

// green
.ds2-section-break--teal {
  .ds2-section-break__summary {
    color: black;
    background-color: rgba($color-brand-teal, 0.1);
  }
  .ds2-section-break__content {
    color: black;
    background-color: rgba($color-brand-teal, 0.4);
  }
}
  • URL: /components/raw/section-break/_section-break.scss
  • Filesystem Path: src/library/ds2/02-components/section-break/_section-break.scss
  • Size: 3.5 KB 
{
  "sections": [
    {
      "title": "heading-xl",
      "theme": "green",
      "content": "\n              <h3>heading-l</h3>\n              <h4>heading-m</h4>\n              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sinmt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n            "
    },
    {
      "title": "heading-xl",
      "theme": "green",
      "content": "\n              <h3>heading-l</h3>\n              <h4>heading-m</h4>\n              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sinmt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n            "
    }
  ]
}