Custom theme (replace with client name)

Topics 

<div class="topic-list">
    <span class="topic-list__item">topic 1</span>
    <span class="topic-list__item">topic 2</span>
</div>
 
{% from 'macros/post-type-tag/post-type-tag.twig' import linkedPostTypeTag %}
<div class="topic-list">
    {% for topic in topics %}
            {% if hasLinks %}
               {{ linkedPostTypeTag(topic.url, postType, topic.topic ) }}
            {% else %}
                <span class="topic-list__item">{{ topic }}</span>
            {% endif %}
    {% endfor %}
</div>
 
{
  "topics": [
    "topic 1",
    "topic 2"
  ]
}
  • Content: 
    .topic-list
    display flex
    flex-wrap wrap
    grid-gap 12px

    +above(largeDeviceBreakpoint)
        grid-gap 24px

    &__link
    &__item
        font-size 16px
        font-weight 600
        line-height 1.65em

    &__item
        @extends $richText
        color #B0B0B0
        font-weight 400
        line-height 34px
        text-transform capitalize

    &__link
    &__type
        background-color greenAppleDK3
        @extends $hypertextDark
        box-shadow none
        color white
        display flex
        font-weight 600
        font-size 16px
        grid-gap 5px
        justify-content space-between
        line-height 16px
        padding 8px 12px
        text-decoration none
        text-transform capitalize
        transition all 0.3s ease
        z-index 10

        &--promising-practices
            background-color aquaDk
        &--article
        &--case-study
        &--news
        &--press-release
            background-color grape

        &:hover
        &:focus
            background-color greenAppleDk4
            box-shadow 0 4px 16px rgba(0, 0, 0, 0.25)

        &:active
            background-color greenAppleDK3

    &__icon
        width 12px
  • URL: /components/raw/topics/topics.styl
  • Filesystem Path: patterns/partials/topics/topics.styl
  • Size: 1.2 KB

No notes defined.