TheaterMania Component Library

Content List 

<section class="content-featured">
    <div class="content-featured__row">
        <div class="featured-row__image">
            <img class="featured-image" src="/assets/images/home/schoolOfRock1.jpg" alt="placeholder alt" />
        </div>
        <div class="featured-row__info">
            <div class="featured-category">Theater News</div>
            <h2 class="heading-large">Rock Out with the Cast of the School of Rock Tour</h2>
            <p>Andrew Lloyd Webber&#x27;s musical will stick it to the man across the country this fall.</p>
            <div class="more-link">
                <a href="#" class="btn btn--base btn--plain">Read More</a>
            </div>

        </div>
    </div>
</section>
 
<section class="content-featured">
  <div class="content-featured__row">
    <div class="featured-row__image">
      <img class="featured-image" src="{{image}}" alt="{{image-alt}}" />
    </div>
    <div class="featured-row__info">
      {{#if category}}
        <div class="featured-category">{{category}}</div>
      {{/if}}
      <h2 class="heading-large">{{title}}</h2>
      <p>{{copy}}</p>
      {{render '@more-link' featured-link-modifiers merge=true}}
    </div>
  </div>
</section>
 
{
  "title": "Rock Out with the Cast of the School of Rock Tour",
  "copy": "Andrew Lloyd Webber's musical will stick it to the man across the country this fall.",
  "category": "Theater News",
  "image": "/assets/images/home/schoolOfRock1.jpg",
  "image-alt": "placeholder alt",
  "featured-link-modifiers": {
    "more-link": "Read More"
  }
}
  • Content: 
    .content-featured__row {
  display: flex;
  flex-direction: column;
  border: 1px solid $color-border;

  @include breakpoint($break-medium) {
    flex-direction: row;
    margin: 0 auto;
  }
}

.featured-category {
  margin-bottom: 1.25rem;
  font-size: $ms-neg-1;
  font-style: italic;
}

.featured-row__image {
  display: flex;
  align-items: center;
  background: $color-gray-dark;

  @include breakpoint($break-large) {
    flex: 0 1 50%;
  }
}

.featured-image {
  flex: 0 0 auto;
}

.featured-row__info {
  display: flex;
  flex-direction: column;
  align-self: center;
  padding: 2rem;

  @include breakpoint($break-small) {
    padding: 2.5rem;
  }

  @include breakpoint($break-large) {
    flex: 0 1 50%;
    max-width: 50%;
    box-sizing: border-box;
  }
}

.heading-large {
  .featured-row__info & {
    margin-bottom: 0.25rem;
  }
}

.more-link {
  .content-featured & {
    text-align: left;
  }
}

.btn {
  .featured-row__info & {
    align-self: center;
    margin-top: 0.5rem;
    min-width: auto;

    @include breakpoint($break-medium) {
      align-self: flex-start;
    }
  }
}

.ad-container {
  .content-featured + & {
    @include breakpoint($break-medium) {
      margin: 2.5rem 0;
    }
  }
}
  • URL: /components/raw/content-featured/Content-Featured.scss
  • Filesystem Path: src/components/02-Patterns/Content Featured/Content-Featured.scss
  • Size: 1.2 KB

There are no notes for this item.