TheaterMania Component Library

Section Title 

<div class="section-title">
    <svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
    <h2 id="most_viewed_articles" class="title-highlight">Most Viewed Articles</h2>
</div>
 
<div class="section-title">
  {{render '@icons--star' icon merge=true}}
  <h2{{#if aria-id}} id="{{aria-id}}"{{/if}} class="title-highlight">{{title}}</h2>
</div>
 
{
  "title": "Most Viewed Articles",
  "aria-id": "most_viewed_articles"
}
  • Content: 
    .section-title {
  padding: 0.69rem 0 0.75rem;
  width: 100%;
  border-top: 0.25rem solid $color-gray;
  border-bottom: 1px solid $color-border;
}

.title-highlight {
  .section-title & {
    display: inline;
  }
}

.icon {
  .section-title & {
    margin-right: 0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    fill: $color-gray-lighter;
    stroke: $color-gray-light;
  }
}

.icon--star {
  .section-title & {
    width: 1.31rem;
    fill: none;
  }
}

.icon--article,
.icon--tickets,
.icon--photo {
  .section-title & {
    margin-right: 0.25rem;
    width: 1.31rem;
    height: 1.31rem;
    stroke: $color-gray-light;
  }
}

.icon--link,
.icon--chat {
  .section-title & {
    margin-right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    stroke: $color-gray-light;
    stroke-width: 4;
    fill: none;
  }
}

.icon--clock,
.icon--question {
  .section-title & {
    fill: none;
  }
}

.icon--arrow-bottom {
  .section-title & {
    fill: none;
  }
}
  • URL: /components/raw/section-title/Section-Title.scss
  • Filesystem Path: src/components/01-Units/Type/Section Title/Section-Title.scss
  • Size: 964 Bytes

Section titles are one of the most employed units in the component library. Their use can be for a literal <section> or distinct area of content.