University of Leeds Design System v1.0.22

Section Break: Grey theme (un-grouped)

No notes defined.

{% 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--grey">
    <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">

            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>

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

<details class="ds2-section-break ds2-section-break--grey">
    <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">

            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>

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

<details class="ds2-section-break ds2-section-break--grey">
    <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">

            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>

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

  &__summary {
    font-family: uolSans, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid $color-brand-black-40;

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

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

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

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

  &__content {
    padding: 24px;
    margin: 0 auto;
    
    @include media(">=uol-media-m") {
      padding: 32px 48px;
    }

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

      h3 {
        // style h4
        font-size: 32px;
        font-weight: 400;
      }

      *:first-of-type {
        margin-top: 0;
      }
      
      p {
        font-family: uolInter, "Arial";
        font-size: 20px;
        line-height: 24px;
      }
    }
  }

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

// theme options

// white
.ds2-section-break--grey {
  .ds2-section-break__summary {
    color: black;
    background: $color-brand-black-5;
    border-color: $color-brand-black-40;
  } 
  .ds2-section-break__content {
    color: $color-brand-black;
    background: $color-brand-black-10;
  }
}

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

// 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);
  }
}
  • URL: /components/raw/section-break/_ds2-section-break.scss
  • Filesystem Path: src/library/ds2/02-components/ds2-section-break/_ds2-section-break.scss
  • Size: 2.2 KB 
{
  "sections": [
    {
      "title": "Section title",
      "theme": "grey",
      "content": "\n            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>\n            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>\n            "
    },
    {
      "title": "Section title",
      "theme": "grey",
      "content": "\n            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>\n            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>\n            "
    },
    {
      "title": "Section title",
      "theme": "grey",
      "content": "\n            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>\n            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>\n            "
    }
  ],
  "ungrouped": true
}