Tag Section 

<section class="tag-section">
    <h3 class="tag-section__headline">TAGS</h3>
    <ul class="tag-list">
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
    </ul>
</section>
 
<section class="tag-section">
    <h3 class="tag-section__headline">TAGS</h3>
    <ul class="tag-list">
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
        <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
    </ul>
</section>
 
/* No context defined. */
  • Content: 
    .tag-section {
  @extend %container-md;
  @extend %container-vertical-spacing-xl;

  .tag-list {
    margin-top: $spacer-sm;
  }
}

.tag-section__headline {
  @extend %heading-font-heavy;

  font-size: $font-size-base;
  color: $meta-tags-headline-text-color;
  text-align: center;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .tag-section__headline {
    font-size: $font-size-sm;
  }
}
  • URL: /components/raw/tag-section/_tag-section.scss
  • Filesystem Path: components/04-molecules/tag-section/_tag-section.scss
  • Size: 401 Bytes

No notes defined.