TheaterMania Component Library

Cast and Crew List 

<div class="cast">
    <div class="section-title">
        <svg class="icon icon--star">
  <use xlink:href="/assets/icons/sprite-sheet.svg#star"></use>
</svg>
        <h2 id="meet_the_cast" class="title-highlight">Meet the Cast</h2>
    </div>
    <ul class="cast__list">
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/noblezadaEva.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Eva Noblezada</a>
                <span class="cast-role">Kim</span>
            </div>
        </li>
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/brionesJonJon.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Jon Jon Briones</a>
                <span class="cast-role">The Engineer</span>
            </div>
        </li>
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/brammerAlistair.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Alistair Brammer</a>
                <span class="cast-role">Chris</span>
            </div>
        </li>
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/ilawDevin.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Devin Ilaw</a>
                <span class="cast-role">Thuy</span>
            </div>
        </li>
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/clarkeKatieRose.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Katie Rose Clarke</a>
                <span class="cast-role">Ellen</span>
            </div>
        </li>
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/leungDorcas.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Dorcas Leung</a>
                <span class="cast-role">Gigi</span>
            </div>
        </li>
        <li class="cast-list-item">
            <a href="#">
                <img class="cast-image thumbnail" src="/assets/images/showpage/christopherNicholas.jpg" alt="Cast member name alt tag" />
            </a>
            <div class="cast-list-info">
                <a href="#">Nicholas Christopher</a>
                <span class="cast-role">John</span>
            </div>
        </li>
    </ul>
</div>
 
<div class="cast{{#if class}} {{class}}{{/if}}">
  {{render '@section-title' cast-modifiers merge=true}}
  <ul class="cast__list">
  {{#each cast}}
    <li class="cast-list-item">
      {{#if image}}
        <a href="#">
          <img class="cast-image thumbnail" src="{{image}}" alt="{{image-alt}}" />
        </a>
      {{/if}}
      <div class="cast-list-info">
        <a href="#">{{name}}</a>
        <span class="cast-role">{{role}}</span>
      </div>
    </li>
  {{/each}}
  </ul>
</div>
 
{
  "cast-modifiers": {
    "title": "Meet the Cast",
    "aria-id": "meet_the_cast",
    "icon": {
      "modifier": "star"
    }
  },
  "cast": [
    {
      "image": "/assets/images/showpage/noblezadaEva.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Eva Noblezada",
      "role": "Kim"
    },
    {
      "image": "/assets/images/showpage/brionesJonJon.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Jon Jon Briones",
      "role": "The Engineer"
    },
    {
      "image": "/assets/images/showpage/brammerAlistair.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Alistair Brammer",
      "role": "Chris"
    },
    {
      "image": "/assets/images/showpage/ilawDevin.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Devin Ilaw",
      "role": "Thuy"
    },
    {
      "image": "/assets/images/showpage/clarkeKatieRose.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Katie Rose Clarke",
      "role": "Ellen"
    },
    {
      "image": "/assets/images/showpage/leungDorcas.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Dorcas Leung",
      "role": "Gigi"
    },
    {
      "image": "/assets/images/showpage/christopherNicholas.jpg",
      "image-alt": "Cast member name alt tag",
      "name": "Nicholas Christopher",
      "role": "John"
    }
  ]
}
  • Content: 
    .cast__list {
  margin-bottom: 0;
  padding: 0;
  list-style: none;

  @include breakpoint($break-small) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

.cast-list-item {
  margin-bottom: 0.25rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid $color-border;

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

  &::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
  }

  @include breakpoint($break-small) {
    flex: 0 1 48%;
    margin: 0 0 1rem;
    padding-bottom: 1rem;

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

.cast-list-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.cast-role {
  display: block;
  font-style: italic;
  font-size: $ms-neg-1;
}

.cast-image {
  float: left;
  margin-right: 0.75rem;
  max-width: 3.75rem;
}
  • URL: /components/raw/cast/Cast.scss
  • Filesystem Path: src/components/02-Patterns/Cast/Cast.scss
  • Size: 917 Bytes

There are no notes for this item.