TheaterMania Component Library

Content List 

<section class="content">
    <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>
    <ul aria-labelledby="most_viewed_articles" class="content__list content__list--related">
        <li class="content-list-item">
            <a href="#article-link" class="content-link-image">
                <img src="/assets/images/articles/mostViewed1Small.jpg" alt="placeholder alt" class="thumbnail" />
            </a>

            <div class="content-list-info">
                <a href="#" class="content-link-title">Lesli Margherita to Star in World Premiere of Who&#x27;s Holiday!</a>
            </div>
        </li>
        <li class="content-list-item">
            <a href="#article-link" class="content-link-image">
                <img src="/assets/images/articles/mostViewed2Small.jpg" alt="Actor holding a straight razor while actress looks on in a dimly lit room" class="thumbnail" />
            </a>

            <div class="content-list-info">
                <a href="#" class="content-link-title">Attend the Tale of Norm Lewis and Carolee Carmello in Sweeney Todd</a>
            </div>
        </li>
        <li class="content-list-item">

            <a href="#video-link" class="thumbnail-video-link content-link-image">
                <div class="thumbnail-overlay-container">
                    <svg class="icon icon--play">
  <use xlink:href="/assets/icons/sprite-sheet.svg#play"></use>
</svg>
                    <img src="/assets/images/articles/mostViewed3Small.jpg" alt="Small leaf growing from tree trunk on a stage with theater seats in background" class="thumbnail thumbnail--video" />
                </div>
            </a>

            <div class="content-list-info">
                <a href="#" class="content-link-title">A Tree Grows on Broadway: Come From Away and the Cutting Edge of Green Set Design</a>
            </div>
        </li>
        <li class="content-list-item">
            <a href="#article-link" class="content-link-image">
                <img src="/assets/images/articles/mostViewed4Small.jpg" alt="Actors perform a young couple sitting on a couch holding hands" class="thumbnail" />
            </a>

            <div class="content-list-info">
                <a href="#" class="content-link-title">Ben Platt, Rachel Bay Jones, and More Top 2017 Lucille Lortel Award Winners List</a>
            </div>
        </li>
    </ul>
</section>
 
{{#if section-title}}
  <section class="content">
    {{render '@section-title' modifiers merge=true}}
    {{#if select-modifiers}}
      {{render '@select' select-modifiers merge=true}}
    {{/if}}
  {{else}}
  <div class="content">
{{/if}}
  <{{#if ordered}}ol{{else}}ul{{/if}}{{#if aria-id}} aria-labelledby="{{aria-id}}"{{/if}} class="content__list{{#if class}} content__list--{{class}}{{/if}}">
    {{#each article-links}}
      {{#if article}}
        {{#if ad}}
          </ul>
          <div class="category-item-ad">
            {{render '@ads--728x90' ad-modifiers merge=true}}
          </div>
          <{{#if ordered}}ol{{else}}ul{{/if}}{{#if aria-label}} aria-label="{{aria-label}}"{{/if}} class="content__list{{#if class}} content__list--{{class}}{{/if}}">
          {{else}}
          <li class="content-list-item">
            {{#if video}}
              {{render '@thumbnails--video-thumbnail' modifiers merge=true}}
              {{else}}
                {{render '@thumbnails--thumbnail' modifiers merge=true}}
            {{/if}}
            <div class="content-list-info">
              {{#if star-modifier}}
                {{render '@rating' star-modifier merge=true}}
              {{/if}}
              <a href="#" class="content-link-title">{{title}}</a>
              {{#if info}}
                <div class="content-info">
                  {{#each info}}
                    <div>{{copy}}</div>
                  {{/each}}
                </div>
              {{/if}}
            </div>
          </li>
          {{/if}}
      {{/if}}
    {{/each}}
  </{{#if ordered}}ol{{else}}ul{{/if}}>
{{#if section-title}}
  </section>
  {{else}}
  </div>
{{/if}}
 
{
  "section-title": true,
  "title": "Most Viewed Articles",
  "aria-id": "most_viewed_articles",
  "ordered": null,
  "class": "related",
  "article-links": [
    {
      "article": true,
      "title": "Lesli Margherita to Star in World Premiere of Who's Holiday!",
      "thumbnail": true,
      "modifiers": {
        "picture": null,
        "class": "content-link-image",
        "image": "/assets/images/articles/mostViewed1Small.jpg",
        "image-alt": "placeholder alt"
      }
    },
    {
      "article": true,
      "title": "Attend the Tale of Norm Lewis and Carolee Carmello in Sweeney Todd",
      "thumbnail": true,
      "modifiers": {
        "picture": null,
        "class": "content-link-image",
        "image": "/assets/images/articles/mostViewed2Small.jpg",
        "image-alt": "Actor holding a straight razor while actress looks on in a dimly lit room"
      }
    },
    {
      "article": true,
      "title": "A Tree Grows on Broadway: Come From Away and the Cutting Edge of Green Set Design",
      "video": true,
      "modifiers": {
        "picture": null,
        "class": "content-link-image",
        "image": "/assets/images/articles/mostViewed3Small.jpg",
        "image-alt": "Small leaf growing from tree trunk on a stage with theater seats in background"
      }
    },
    {
      "article": true,
      "title": "Ben Platt, Rachel Bay Jones, and More Top 2017 Lucille Lortel Award Winners List",
      "thumbnail": true,
      "modifiers": {
        "picture": null,
        "class": "content-link-image",
        "image": "/assets/images/articles/mostViewed4Small.jpg",
        "image-alt": "Actors perform a young couple sitting on a couch holding hands"
      }
    }
  ]
}
  • Content: 
    .content {
  position: relative;
  margin-bottom: 2.5rem;
  counter-reset: content;
}

.content__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.5rem 0;
  padding: 0;

  @include breakpoint($break-medium) {
    justify-content: flex-start;
    margin-bottom: 2.5rem;
  }
}

.content-list-item {
  display: flex;
  flex-direction: column;
  margin: 0 auto 1.25rem;
  padding: 0 0 1rem;
  max-width: 18.75rem;
  border-bottom: 1px solid $color-border;

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  @include breakpoint($break-xsmall) {
    flex: 0 1 48%;
    margin: 0;
    padding-bottom: 2rem;
    max-width: none;
    border-bottom: none;
  }

  @include breakpoint($break-medium) {
    flex: 0 1 31%;
    margin-right: 3.5%;

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  @include breakpoint($break-large) {
    flex-direction: row;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid $color-border;

    &:nth-last-child(-n+3) {
      border-bottom: none;
    }
  }

  .content__list--related & {
    @include breakpoint($break-xsmall) {
      margin: 0 0 2rem;
      padding: 0;

      &:nth-last-child(-n+2) {
        margin-bottom: 0;
      }
    }

    @include breakpoint($break-medium) {
      flex: 0 1 31%;
      margin-right: 3.5%;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    @include breakpoint($break-large) {
      flex-direction: column;
      flex: 0 1 23%;
      margin-right: calc(8%/3);
      border-bottom: none;

      &:nth-last-child(-n+4) {
        margin-bottom: 0;
      }

      &:nth-child(3n) {
        margin-right: calc(8%/3);
      }

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }

  .content__list--related--show & {
    border-bottom: none;

    @include breakpoint($break-xsmall) {
      margin-bottom: 2rem;
      padding-bottom: 0;

      &:nth-last-child(-n+2) {
        margin-bottom: 0;
      }
    }

    @include breakpoint($break-medium) {
      flex: 0 1 31%;
      margin-right: 3.5%;

      &:nth-child(3n) {
        margin-right: 0;
      }

      &:nth-child(4n) {
        margin-right: 3.5%;
      }

      &:nth-last-child(-n+3) {
        margin-bottom: 0;
      }
    }

    @include breakpoint($break-large) {
      flex-direction: column;
      flex: 0 1 31%;
      margin-right: 3.5%;
    }
  }
}

.content-list-info {
  display: flex;
  flex-direction: column;
  position: relative;

  ol.content__list & {
    &::before {
      position: absolute;
      counter-increment: content;
      content: counter(content) ".";
      line-height: 1.1;
      font-size: $ms-1;
    }
  }

  @include breakpoint($break-xsmall) {
    flex: 1 0 auto;
  }

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

.star-rating {
  .content-list-info & {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem 0.4rem;
  }
}

.content-link-image {
  margin: 0 auto 1rem;

  @include breakpoint($break-medium) {
    margin-left: 0;
    margin-bottom: 1rem;
  }

  @include breakpoint($break-large) {
    position: relative;
    margin: 0;
    left: -1px;
    max-width: 9.38rem;
  }
}

.content-info {
  margin: 0.5rem 0 0;

  @include breakpoint($break-xsmall) {
    margin-top: 0.75rem;
  }

  .content__list--text & {
    margin-bottom: 0;

    @include breakpoint($break-medium) {
      font-size: $ms-0;
    }
  }

  .content__list--related & {
    order: -1;
    margin: 0 0 0.5rem;
    font-style: italic;
    font-size: $ms-neg-1;

    @include breakpoint($break-large) {
      margin-top: 0.75rem;
    }
  }

  .content__list--related--show & {
    order: 1;
    margin-bottom: 0;
    font-style: normal;
  }

  .content__list--reviews & {
    margin-top: 0.25rem;
  }
}

.content-link-title {
  ol.content__list & {
    margin-left: 1.75rem;
  }
}

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

.icon--play {
  .content & {
    fill: $color-white;
  }

  .content-list-item .thumbnail-overlay-container & {
    @include breakpoint($break-large) {
      top: 80%;
      left: 80%;
      transform: translate(-50%, -55%) scale(0.45);
    }
  }

  .content-list-item .thumbnail-video-link:hover & {
    @include breakpoint($break-large) {
      transform: translate(-55%, -60%) scale(0.6);
    }
  }
}

.content-list-item {
  .content__list--reviews & {
    @include breakpoint($break-xsmall) {
      margin: 0 0 2rem;
      padding: 0;

      &:nth-last-child(-n+2) {
        margin-bottom: 0;
      }
    }

    @include breakpoint($break-medium) {
      flex: 0 1 31%;
      margin-right: 3.5%;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    @include breakpoint($break-large) {
      flex-direction: column;
      flex: 0 1 23%;
      margin: 0 calc(8%/3) 0 0;
      border-bottom: none;

      &:nth-child(3n) {
        margin-right: calc(8%/3);
      }

      &:nth-child(4n) {
        margin-right: 0;
      }

      &:nth-child(n+5) {
        margin-top: 2rem;
      }
    }
  }
}

.form-input {
  .content & {
    margin: 1.5rem 0;

    @include breakpoint($break-medium) {
      position: absolute;
      margin-top: 0.75rem;
      top: 0;
      right: 0;
      min-width: 12.5rem;
    }

    .select {
      @include breakpoint($break-medium) {
        padding: 0.25rem 0.5rem;
        font-size: $ms-neg-1;
      }
    }

    .select-icon-container .icon {
      @include breakpoint($break-medium) {
        top: 0.13rem;
      }
    }
  }
}

.content-info {
  .content__list--related & {
    order: -1;
    margin: 0 0 0.5rem;
    font-style: italic;
  }
}

.content-link-image {
  .content__list--related &,
  .content__list--reviews & {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
    max-width: none;
  }
}

.content-list-info {
  .content__list--related & {
    display: flex;
    flex: 0 0 auto;
    margin-right: 0;
  }

  .content__list--text & {
    flex: 0 1 100%;
  }
}

.byline {
  .content-info & {
    margin-bottom: 0.75rem;
  }
}

.icon--play {
  .content__list--related .content-list-item .thumbnail-overlay-container & {
    top: 75%;
    left: 85%;
    transform: translate(-50%, -50%) scale(0.7);
  }

  .content__list--related .content-list-item .thumbnail-video-link:hover & {
    transform: translate(-50%, -50%) scale(0.9);
  }
}
  • URL: /components/raw/content-list/Content-List.scss
  • Filesystem Path: src/components/02-Patterns/Content List/Content-List.scss
  • Size: 6.4 KB

There are no notes for this item.