University of Leeds Design System v1.0.15

Article Section: Accordion

No notes defined.

{% for section in sections %}
    <div class="uol-article-section uol-rich-text">
        {% if section.title %}
            <h2 class="uol-article-section__title">{{ section.title }}</h2>
        {% endif %}
        <div class="uol-article-section__content">
            {% render '@'+section.type, section.content %}
        </div>
    </div>
{% endfor %}
 
<div class="uol-article-section uol-rich-text">

    <h2 class="uol-article-section__title">Publications</h2>

    <div class="uol-article-section__content">

        <div class="uol-accordion uol-rich-text">
            <h2 class="uol-accordion__title">
                Journal articles
            </h2>

            <div class="uol-accordion__content">
                <div class="uol-accordion__content-inner">

                    <div class="uol-rich-text">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
                        <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
                        <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
                        <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
                        <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
                    </div>

                </div>
            </div>

        </div>

        <div class="uol-accordion uol-rich-text">
            <h2 class="uol-accordion__title">
                Conference papers
            </h2>

            <div class="uol-accordion__content">
                <div class="uol-accordion__content-inner">

                    <div class="uol-rich-text">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
                        <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
                        <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
                        <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
                        <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
                    </div>

                </div>
            </div>

        </div>

        <div class="uol-accordion uol-rich-text">
            <h2 class="uol-accordion__title">
                Presentations (conference/workshop etc)
            </h2>

            <div class="uol-accordion__content">
                <div class="uol-accordion__content-inner">

                    <div class="uol-rich-text">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
                        <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
                        <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
                        <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
                        <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
                    </div>

                </div>
            </div>

        </div>

        <div class="uol-accordion uol-rich-text">
            <h2 class="uol-accordion__title">
                Datasets
            </h2>

            <div class="uol-accordion__content">
                <div class="uol-accordion__content-inner">

                    <div class="uol-rich-text">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
                        <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
                        <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
                        <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
                        <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>
  • Content: 
    .uol-article-section {

}

  .uol-article-section__title {
    margin-bottom: $spacing-4 !important;
  }

    .uol-article-section__content {

      .uol-spacing ul:last-child {
        margin-bottom: 0 !important;
      }
      
      .uol-spacing ul:first-of-type {
        padding-top: $spacing-2;
      }

      a {
            text-decoration: underline;
            color: inherit;

            &:hover,
            &:focus {
                // color: $color-brand-1;
            }
        }

        .uol-publications-list__further-link {
          text-decoration: none;
          font-weight: $font-weight-bold--sans-serif;
        }
    }
  • URL: /components/raw/uol-article-section/_article-section.scss
  • Filesystem Path: src/library/02-components/article-section/_article-section.scss
  • Size: 655 Bytes 
{
  "sections": [
    {
      "title": "Publications",
      "type": "uol-accordion",
      "content": {
        "accordions": [
          {
            "title": "Journal articles",
            "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p><p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p><p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p><p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p><p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
          },
          {
            "title": "Conference papers",
            "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p><p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p><p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p><p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p><p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
          },
          {
            "title": "Presentations (conference/workshop etc)",
            "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p><p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p><p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p><p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p><p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
          },
          {
            "title": "Datasets",
            "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p><p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p><p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p><p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p><p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
          }
        ]
      }
    }
  ]
}