TheaterMania Component Library

Show Details 

<div class="show-details-container">
    <div class="section-title">
        <svg class="icon icon--info">
  <use xlink:href="/assets/icons/sprite-sheet.svg#info"></use>
</svg>
        <h2 id="show_details" class="title-highlight">Show Details</h2>
    </div>
    <div class="show-details">
        <ul class="show-details__list">
            <li class="show-details-list-item">
                <svg class="icon icon--clock">
  <use xlink:href="/assets/icons/sprite-sheet.svg#clock"></use>
</svg>
                <div class="show-details-info">
                    <span class="title-highlight">Duration:</span>
                    <span class="show-details-copy">2hr 35min. (1 intermission)</span>

                </div>
            </li>
            <li class="show-details-list-item">
                <svg class="icon icon--calendar">
  <use xlink:href="/assets/icons/sprite-sheet.svg#calendar"></use>
</svg>
                <div class="show-details-info">
                    <span class="title-highlight">Dates:</span>
                    <span class="show-details-copy">Open Run</span>

                </div>
            </li>
            <li class="show-details-list-item">
                <svg class="icon icon--phone">
  <use xlink:href="/assets/icons/sprite-sheet.svg#phone"></use>
</svg>
                <div class="show-details-info">
                    <span class="title-highlight">Ticket Office:</span>
                    <span class="show-details-copy">
                    <a href="tel:+12122396200" class="link--phone">212-239-6200</a>
                  </span>

                </div>
            </li>
            <li class="show-details-list-item">
                <svg class="icon icon--map-pin">
  <use xlink:href="/assets/icons/sprite-sheet.svg#map-pin"></use>
</svg>
                <div class="show-details-info">
                    <span class="title-highlight">Location:</span>
                    <span class="show-details-copy">
                  <a href="#">Broadway Theatre</a>,
                    <a href="#">New York City</a>
                </span>
                    <span class="show-details-copy">
                  <a href="#">View Map</a>
                </span>

                </div>
            </li>
        </ul>
    </div>
</div>
 
<div class="show-details-container{{#if class}} {{class}}{{/if}}">
  {{render '@section-title' info-modifiers merge=true}}
  <div class="show-details">
    <ul class="show-details__list">
      {{#each show-info}}
        <li class="show-details-list-item">
          {{#if icon-modifiers}}
            {{render '@icons--clock' icon-modifiers merge=true}}
          {{/if}}
          <div class="show-details-info">
            <span class="title-highlight">{{title}}</span>
            {{#if link}}
              {{#each info}}
                <span class="show-details-copy">
                  <a href="#">{{copy}}</a>{{#if city}},{{/if}}
                  {{#if city}}
                    <a href="#">{{city}}</a>
                  {{/if}}
                </span>
              {{/each}}
              {{else}}
              {{#each info}}
                {{#if telephone}}
                  <span class="show-details-copy">
                    <a href="tel:{{telephone}}" class="link--phone">{{copy}}</a>
                  </span>
                {{else}}
                  <span class="show-details-copy">{{copy}}</span>
                {{/if}}
              {{/each}}
            {{/if}}

          </div>
        </li>
      {{/each}}
    </ul>
  </div>
</div>
 
{
  "info-modifiers": {
    "title": "Show Details",
    "aria-id": "show_details",
    "icon": {
      "modifier": "info"
    }
  },
  "show-info": [
    {
      "info": [
        {
          "copy": "2hr 35min. (1 intermission)"
        }
      ],
      "title": "Duration:",
      "icon-modifiers": {
        "modifier": "clock"
      }
    },
    {
      "info": [
        {
          "copy": "Open Run"
        }
      ],
      "title": "Dates:",
      "icon-modifiers": {
        "modifier": "calendar"
      }
    },
    {
      "info": [
        {
          "telephone": "+12122396200",
          "copy": "212-239-6200"
        }
      ],
      "title": "Ticket Office:",
      "icon-modifiers": {
        "modifier": "phone"
      }
    },
    {
      "info": [
        {
          "copy": "Broadway Theatre",
          "city": "New York City"
        },
        {
          "copy": "View Map"
        }
      ],
      "title": "Location:",
      "link": true,
      "icon-modifiers": {
        "modifier": "map-pin"
      }
    }
  ]
}
  • Content: 
    .show-details-info {
  margin-top: -0.5rem;
}

.show-details {
  display: flex;
  flex-direction: column;
}

.show-details__list {
  margin: 1.44rem 0 0;
  padding: 0;
  width: 100%;

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

.show-details-list-item {
  display: flex;
  margin-bottom: 0.5rem;
  padding: 0 0 0.75rem;
  list-style: none;
  border-bottom: 1px solid $color-gray-lightest;

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

.show-details-copy {
  display: block;
  margin: 0.13rem 0 0.25rem;

  &:last-child {
    margin-bottom: 0;
  }
}

.icon {
  .show-details__list & {
    margin-right: 0.75rem;
    width: 1.31rem;
    height: 1.31rem;
  }
}
  • URL: /components/raw/show-details/Show-Details.scss
  • Filesystem Path: src/components/02-Patterns/Show Details/Show-Details.scss
  • Size: 712 Bytes

There are no notes for this item.