<section class="tag-section">
    <h3 class="tag-section__headline">TAGS</h3>
    <div class="tag-section__container">
        <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>
    </div>
</section>
<section class="tag-section">
    <h3 class="tag-section__headline">TAGS</h3>
    <div class="tag-section__container">
        <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>
    </div>
</section>
/* No context defined for this component. */
  • Content:
    .tag-section {
      margin-bottom: $spacer-lg;
      background-color: $meta-tags-background-color;
      padding-top: $spacer-base;
      padding-bottom: $spacer-lg;
    }
    
    .tag-section__container {
      margin: 0 auto;
      width: 90%;
    }
    
    .tag-section__headline {
      @extend %heading-font-heavy;
    
      text-align: center;
      line-height: $meta-tags-headline-line-height-small;
      color: $meta-tags-headline-text-color;
      font-size: $meta-tags-headline-font-size-small;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .tag-section {
        margin-bottom: $spacer-xl; // xxl -> xl related to fix for author bio margin
        padding-top: $spacer-lg;
        padding-bottom: $spacer-xl;
      }
    
      .tag-section__headline {
        line-height: $meta-tags-headline-line-height;
        font-size: $meta-tags-headline-font-size;
      }
    
      .tag-section__container {
        width: 60%;
      }
    }
    
  • URL: /components/raw/tag-section/_tag-section.scss
  • Filesystem Path: components/02-molecules/tag-section/_tag-section.scss
  • Size: 838 Bytes

There are no notes for this item.