TheaterMania Component Library

Review 

<div class="review-container">
    <div class="section-title">
        <svg class="icon icon--chat">
  <use xlink:href="/assets/icons/sprite-sheet.svg#chat"></use>
</svg>
        <h2 id="theatermania_review" class="title-highlight">Theatermania Review</h2>
    </div>
    <div class="review">
        <img src="/assets/images/showpage/reviewThumbSaigon.jpg" class="thumbnail" alt="Review image alt example" />
        <div class="review__info">
            <ul class="byline">
                <li class="byline-list-item">
                    <a href="#">Zachary Stewart</a>
                </li>
                <li class="byline-list-item">
                    <a href="#">Broadway</a>
                </li>
                <li class="byline-list-item">
                    March 23, 2017
                </li>
            </ul>

            <p>The popular musical about doomed love in the last days of South Vietnam returns to Broadway.</p>
            <div class="read-more">
                <a href="#readmore-link" class="read-more-link">
    Read More
    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/sprite-sheet.svg#arrow-right"></use>
</svg>
  </a>
            </div>
        </div>
    </div>
</div>
 
<div class="review-container{{#if class}} {{class}}{{/if}}">
  {{render '@section-title' review.title-modifiers merge=true}}
  <div class="review">
    <img src="{{review.image}}" class="thumbnail" alt="{{review.image-alt}}" />
    <div class="review__info">
      {{render '@byline' review.byline-modifiers merge=true}}
      <p>{{review.copy}}</p>
      {{render '@read-more'}}
    </div>
  </div>
</div>
 
{
  "review": {
    "title-modifiers": {
      "title": "Theatermania Review",
      "aria-id": "theatermania_review",
      "icon": {
        "modifier": "chat"
      }
    },
    "byline-modifiers": {
      "byline-item": [
        {
          "item": "Zachary Stewart",
          "link": true
        },
        {
          "item": "Broadway",
          "link": true
        },
        {
          "item": "March 23, 2017"
        }
      ]
    },
    "copy": "The popular musical about doomed love in the last days of South Vietnam returns to Broadway.",
    "image": "/assets/images/showpage/reviewThumbSaigon.jpg",
    "image-alt": "Review image alt example"
  }
}
  • Content: 
    .review {
  margin-top: 1rem;

  @include breakpoint($break-medium) {
    display: flex;
    margin-top: 1.5rem;
  }
}

.review__info {
  margin-top: 1rem;

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

.byline {
  .review & {
    text-align: center;

    @include breakpoint($break-medium) {
      margin-top: -0.38rem;
      text-align: left;
    }
  }
}

.read-more {
  .review & {
    @include breakpoint($break-medium) {
      text-align: left;
    }
  }
}

.thumbnail {
  .review & {
    margin: 0 auto;
    max-width: 16.25rem;

    @include breakpoint($break-medium) {
      align-self: center;
    }
  }
}
  • URL: /components/raw/review/Review.scss
  • Filesystem Path: src/components/02-Patterns/Review/Review.scss
  • Size: 641 Bytes

There are no notes for this item.