TheaterMania Component Library

Title and Text 

<div class="title-text-container">
    <div class="section-title">
        <svg class="icon icon--question">
  <use xlink:href="/assets/icons/sprite-sheet.svg#question"></use>
</svg>
        <h2 id="about_the_details" class="title-highlight">About This Show</h2>
    </div>
    <div class="title-text-copy">
        <p>In the last days of the Vietnam War, 17-year-old Kim is forced to work in a Saigon bar run by a notorious character known as the Engineer. There, she meets and falls in love with an American G.I. named Chris, but they are torn apart by the fall
            of Saigon. For 3 years, Kim goes on an epic journey of survival to find her way back to Chris, who has no idea he’s fathered a son.</p>
        <p>Don&#x27;t miss this limited Broadway engagement of the new production The New Yorker calls “a dynamite Broadway revival”, and that NY1 says, “Soars to the rafters!”</p>
    </div>
</div>
 
<div class="title-text-container{{#if class}} {{class}}{{/if}}">
  {{render '@section-title' title-modifiers merge=true}}
  <div class="title-text-copy">
    {{#each text}}
      <p>{{copy}}</p>
    {{/each}}
  </div>
</div>
 
{
  "title-modifiers": {
    "title": "About This Show",
    "aria-id": "about_the_details",
    "icon": {
      "modifier": "question"
    }
  },
  "text": [
    {
      "copy": "In the last days of the Vietnam War, 17-year-old Kim is forced to work in a Saigon bar run by a notorious character known as the Engineer. There, she meets and falls in love with an American G.I. named Chris, but they are torn apart by the fall of Saigon. For 3 years, Kim goes on an epic journey of survival to find her way back to Chris, who has no idea he’s fathered a son."
    },
    {
      "copy": "Don't miss this limited Broadway engagement of the new production The New Yorker calls “a dynamite Broadway revival”, and that NY1 says, “Soars to the rafters!”"
    }
  ]
}
  • Content: 
    .title-text-copy {
  margin-left: auto;
  margin-right: auto;
  max-width: 35.63rem;

  p:last-child {
    margin-bottom: 0;
  }
}
  • URL: /components/raw/title-and-text/Title-and-Text.scss
  • Filesystem Path: src/components/02-Patterns/Title and Text/Title-and-Text.scss
  • Size: 131 Bytes

There are no notes for this item.