E3 Alliance Pattern Library

Topics: Linked Article Topics 

<div class="topic-list">

    <a href="#" class="badge
    badge--article ">
        <span class="badge__icon">

            <svg viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.25 43.4688C30.9844 43.4688 31.7188 42.8262 31.7188 42V15.5625H24.375C22.7227 15.5625 21.4375 14.2773 21.4375 12.625V5.28125H6.75C5.92383 5.28125 5.28125 6.01562 5.28125 6.75V42C5.28125 42.8262 5.92383 43.4688 6.75 43.4688H30.25ZM0.875 6.75C0.875 3.53711 3.44531 0.875 6.75 0.875H21.8965C23.457 0.875 24.9258 1.51758 26.0273 2.61914L34.3809 10.9727C35.4824 12.0742 36.125 13.543 36.125 15.1035V42C36.125 45.3047 33.4629 47.875 30.25 47.875H6.75C3.44531 47.875 0.875 45.3047 0.875 42V6.75Z" fill="white" />
            </svg>
        </span>
        Early Learning
    </a>

    <a href="#" class="badge
    badge--article ">
        <span class="badge__icon">

            <svg viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.25 43.4688C30.9844 43.4688 31.7188 42.8262 31.7188 42V15.5625H24.375C22.7227 15.5625 21.4375 14.2773 21.4375 12.625V5.28125H6.75C5.92383 5.28125 5.28125 6.01562 5.28125 6.75V42C5.28125 42.8262 5.92383 43.4688 6.75 43.4688H30.25ZM0.875 6.75C0.875 3.53711 3.44531 0.875 6.75 0.875H21.8965C23.457 0.875 24.9258 1.51758 26.0273 2.61914L34.3809 10.9727C35.4824 12.0742 36.125 13.543 36.125 15.1035V42C36.125 45.3047 33.4629 47.875 30.25 47.875H6.75C3.44531 47.875 0.875 45.3047 0.875 42V6.75Z" fill="white" />
            </svg>
        </span>
        Postsecondary Completion
    </a>

    <a href="#" class="badge
    badge--article ">
        <span class="badge__icon">

            <svg viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30.25 43.4688C30.9844 43.4688 31.7188 42.8262 31.7188 42V15.5625H24.375C22.7227 15.5625 21.4375 14.2773 21.4375 12.625V5.28125H6.75C5.92383 5.28125 5.28125 6.01562 5.28125 6.75V42C5.28125 42.8262 5.92383 43.4688 6.75 43.4688H30.25ZM0.875 6.75C0.875 3.53711 3.44531 0.875 6.75 0.875H21.8965C23.457 0.875 24.9258 1.51758 26.0273 2.61914L34.3809 10.9727C35.4824 12.0742 36.125 13.543 36.125 15.1035V42C36.125 45.3047 33.4629 47.875 30.25 47.875H6.75C3.44531 47.875 0.875 45.3047 0.875 42V6.75Z" fill="white" />
            </svg>
        </span>
        Career Readiness
    </a>
</div>
 
<div class="topic-list">
    {% for topic in topics %}
            {% if hasLinks %}
            {% include "bits/badge/badge.twig" with {
                    url: topic.url,
                    postType: postType,
                    title: topic.topic
                    }
                %}
            {% else %}
                {% include "bits/label/label.twig" with {
                    title: topic,
                } %}
            {% endif %}
    {% endfor %}
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "topics": [
    {
      "topic": "Early Learning",
      "url": "#"
    },
    {
      "topic": "Postsecondary Completion",
      "url": "#"
    },
    {
      "topic": "Career Readiness",
      "url": "#"
    }
  ],
  "hasLinks": true,
  "postType": "article"
}
  • Content: 
    .topic-list
    display flex
    flex-wrap wrap
    grid-gap 12px

    +above(largeDeviceBreakpoint)
        grid-gap 24px
  • URL: /components/raw/topics/topics.styl
  • Filesystem Path: patterns/partials/topics/topics.styl
  • Size: 123 Bytes

No notes defined.