V6 Clearleft Patterns

Latest 

<div class="Latest">

    <div class="Latest__inner">
        <div class="Latest__intro flow">
            <h2 class="Latest__eyebrow eyebrow">
                Latest
            </h2>
            <h3 class="h h-4">
                Creative thinking
            </h3>
        </div>

        <ul class="Latest__list" role="list">
            <li class="Latest__item">
                <article class="Article-signpost">
                    <div class="Article-signpost__wrapper focus">
                        <div class="flow--3xs">
                            <p class="eyebrow eyebrow--small">advice</p>
                            <p class="h h-6"><a class="Article-signpost__link" href="#">Short text</a></p>
                        </div>
                    </div>
                </article>
            </li>
            <li class="Latest__item">
                <article class="Article-signpost">
                    <div class="Article-signpost__wrapper focus">
                        <div class="flow--3xs">
                            <p class="eyebrow eyebrow--small">advice</p>
                            <p class="h h-6"><a class="Article-signpost__link" href="#">How to engage the right people when recruiting in house for research</a></p>
                        </div>
                    </div>
                </article>
            </li>
            <li class="Latest__item">
                <article class="Article-signpost">
                    <div class="Article-signpost__wrapper focus">
                        <div class="flow--3xs">
                            <p class="eyebrow eyebrow--small">advice</p>
                            <p class="h h-6"><a class="Article-signpost__link" href="#">Design Effectiveness Report 2019</a></p>
                        </div>
                    </div>
                </article>
            </li>
            <li class="Latest__item">
                <article class="Article-signpost">
                    <div class="Article-signpost__wrapper focus">
                        <div class="flow--3xs">
                            <p class="eyebrow eyebrow--small">advice</p>
                            <p class="h h-6"><a class="Article-signpost__link" href="#">Short text</a></p>
                        </div>
                    </div>
                </article>
            </li>
            <li class="Latest__item">
                <article class="Article-signpost">
                    <div class="Article-signpost__wrapper focus">
                        <div class="flow--3xs">
                            <p class="eyebrow eyebrow--small">advice</p>
                            <p class="h h-6"><a class="Article-signpost__link" href="#">How to engage the right people when recruiting in house for research</a></p>
                        </div>
                    </div>
                </article>
            </li>
            <li class="Latest__item">
                <article class="Article-signpost">
                    <div class="Article-signpost__wrapper focus">
                        <div class="flow--3xs">
                            <p class="eyebrow eyebrow--small">advice</p>
                            <p class="h h-6"><a class="Article-signpost__link" href="#">Design Effectiveness Report 2019</a></p>
                        </div>
                    </div>
                </article>
            </li>
        </ul>
    </div>
</div>
 
{% set hasLargeTitle = largeHeading is defined and largeHeading %}
{% set thanks = thanks is defined and thanks %}

<div class="Latest{{ hasLargeTitle ? ' Latest--long-title' }}{{
  thanks
    ? ' Contact-thanks'
  }}">
  {% if hasLargeTitle %}
    <div class="Latest__inner">
      <div class="Latest__intro pad-after-s">
        <h3 class="h h-3">
          {{ title }}
        </h3>
      </div>
    </div>
  {% endif %}

  <div class="Latest__inner">
    <div class="Latest__intro flow">
      {% if eyebrow %}
        <h2 class="Latest__eyebrow eyebrow">
          {{ eyebrow }}
        </h2>
      {% endif %}
      {% if not hasLargeTitle %}
        <h3 class="h h-4">
          {{ title }}
        </h3>
      {% endif %}
      {% if intro %}
        <div class="body small">
          <p>
            {{ intro }}
          </p>
        </div>
      {% endif %}
    </div>

    <ul class="Latest__list" role="list">
      {% for link in links %}
        <li class="Latest__item">
          {% include '@article-signpost' with link %}
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
 
{
  "eyebrow": "Latest",
  "title": "Creative thinking",
  "links": [
    {
      "title": "Short text",
      "link": "#",
      "eyebrow": "advice",
      "description": ""
    },
    {
      "title": "How to engage the right people when recruiting in house for research",
      "link": "#",
      "eyebrow": "advice",
      "description": ""
    },
    {
      "title": "Design Effectiveness Report 2019",
      "link": "#",
      "eyebrow": "advice",
      "description": ""
    },
    {
      "title": "Short text",
      "link": "#",
      "eyebrow": "advice",
      "description": ""
    },
    {
      "title": "How to engage the right people when recruiting in house for research",
      "link": "#",
      "eyebrow": "advice",
      "description": ""
    },
    {
      "title": "Design Effectiveness Report 2019",
      "link": "#",
      "eyebrow": "advice",
      "description": ""
    }
  ]
}
  • Content: 
    .Latest {
  &__list {
    padding-top: var(--space-s-l);
  }

  &__item:not(:first-child) {
    margin-top: var(--space-s-m);
  }
}

/* media */
@media screen and (min-width: 50rem) {
  .Latest {
    &__inner {
      display: flex;
    }

    &__list {
      column-count: 2;
      max-width: 786px;
      column-gap: var(--gutter);
    }

    &__item {
      break-inside: avoid;
    }

    &__intro {
      margin-right: var(--gutter);
      width: 22%;
      min-width: 180px;
    }

    &--long-title &__inner:first-child &__intro {
      width: 80%;
    }

    &--long-title &__list {
      padding-top: var(--space-2xs);
    }
  }
}
  • URL: /components/raw/latest/latest.css
  • Filesystem Path: src/templates/components/_deprecated/latest/latest.css
  • Size: 639 Bytes

No notes defined.