Split passage list

Split passage list

HTML


<div class="orc-c-split-passage-list ">
  <div class="orc-c-split-passage-list__secondary">
    <div class="orc-c-list ">

      <h4 class="orc-c-list__title">Rose. Rabbit. Lie. At a Glance</h4>

      <ul class="orc-c-list__list">

        <li class="orc-c-list__item">
          <p><strong>Location</strong></p>
          <p>Level 2 | The Chelsea Tower</p>

        </li>
        <!--end orc-c-list__item-->
        <li class="orc-c-list__item">
          <p><strong>Hours</strong></p>
          <p>Wed - Sat | 6PM - Midnight</p>
          <p>Live entertainment | 7PM nightly</p>

        </li>
        <!--end orc-c-list__item-->
        <li class="orc-c-list__item">
          <p><strong>Attire</strong></p>
          <p>Upscale cocktail attire required</p>

        </li>
        <!--end orc-c-list__item-->
        <li class="orc-c-list__item">
          <p><strong>Accolades</strong></p>
          <p>People Love Us On Yelp' 2017 Award Recipient</p>
          <p>Desert Companion, KNPR’s Best Dessert</p>
          <p>Open Table, Top 100 Hot Spots in America</p>

        </li>
        <!--end orc-c-list__item-->
        <li class="orc-c-list__item">
          <p><strong>Menus</strong></p>
          <p><a href='#'>Dinner Menu (6KB PDF)</a></p>
          <p><a href='#'>Dessert Menu (6KB PDF)</a></p>
          <p><a href='#'>Dietary Menu (6KB PDF)</a></p>
          <p><a href='#'>The Study List (6KB PDF)</a></p>
          <p><a href='#'>Music Room Menu (6KB PDF)</a></p>
          <p><a href='#'>Social Hour Menu (6KB PDF)</a></p>
          <p><a href='#'>Reception Menu (6KB PDF)</a></p>

        </li>
        <!--end orc-c-list__item-->

      </ul>
      <!--end orc-c-list__list-->

    </div>
    <!--end orc-c-list-->

    <button class="orc-c-btn orc-c-btn--purple orc-u-margin-left orc-u-margin-top">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Reserve Table</span>




    </div><!--end orc-c-btn__inner-->

</button>
    <!-- end orc-c-btn -->

  </div>
  <!--end orc-c-split-passage-list__item-->

  <div class="orc-c-split-passage-list__main">
    <div class="orc-c-text-passage ">

      <p>Rose. Rabbit. Lie. is a modern supper club serving reinvented American classics alongside live music and entertaining performances. Inspired by social clubs of the past, Rose. Rabbit. Lie. is a place where familiar dishes take surprising twists
        and turns, cocktails are mixed with subtle flair, and spontaneous, live entertainment adds to an already extraordinary evening.</p>
      <p>Here, guests will never have the same experience twice.</p>
      <h3>Signature Dishes & Drinks</h3>
      <ul>
        <li><strong>Caviar Tacos</strong>: Voted “Best Small Plate” by Vegas Seven, this playful take on caviar is a dining experience all its own. Made with hackleback caviar, a Yukon gold potato shell, and hamachi, this twist on a refined classic is not
          to be missed.</li>
        <li>Oysters Rockefeller: Decadent yet rich, this guest favorite is topped with house-cured bacon, spinach, chartreuse, and bacon dust.</li>
        <li>Beef Wellington: Prime Tenderloin in a puff pastry atrium, seared Hudson Valley foie gras, creamed spinach, roasted king trumpets, and black truffle.</li>
        <li>Cookie Jar: An eclectic combination of petite cookies and treats takes diners on a sweet adventure.</li>
        <li>Whiskey Smash: Redemption rye, muddled lemon, mint, fruits in season.</li>
      </ul>

    </div>
    <!--end orc-c-text-passage-->

  </div>
  <!--end orc-c-split-passage-list__item-->

</div>
<!--end orc-c-split-passage-list-->

When to use

This component is useful when writing long-form content that also includes some key details to get across visually—such as dates and times, locations, and related links. It’s essentially a two-column layout with a long-form layout on the left and quick details on the right.

When to consider an alternative

If the content is very short, you could instead place a table inside a text passage to relay the information even more quickly.

Class Name	Description
`orc-c-split-passage-list` Required	Apply to the split passage list’s containing HTML element. This is set to `display: flex` on large screens to place split passage list secondary container beside split passage list main container.
`orc-c-split-passage-list__secondary` Required	Apply to `div` within the split passage list that represents the secondary content of the component. This contains various lists and optional buttons.
`orc-c-list` Required	Apply to `div`s within `orc-c-split-passage-list__secondary` that contain a heading and a list of items. See list for more information about classes used in this component.
`orc-c-btn`	Apply to optional `button` or `a` tag if a call to action is needed. See button for more information about classes used in this component.
`orc-c-split-passage-list__main` Required	Apply to `div` within the split passage list that represents the main content of the component. This contains a text passage.
`orc-c-text-passage` Required	Apply to `div` within the `orc-c-split-passage-list__main` container to style general tags within the text passage. See text passage for more information about classes used in this component.

Split passage list `orc-c-split-passage-list`

Usage

When to use

When to consider an alternative