Split View

The split view component is made up of two content areas. The description area on the left and with the data/information area on the right. This pattern helps customers focus on data-heavy information.

Default

Description heading

Description text

Data heading

Data text

  <div class="split-view">
    <div class="split-view__description">
      <h3 class="split-view__heading">Description heading</h3>
      <p class="split-view__text">Description text</p>
    </div>
    <div class="split-view__data">
      <h3 class="split-view__heading">Data heading</h3>
      <p class="split-view__text">Data text</p>
    </div>
  </div>

Description

The standard for showing content with the spilt-view pattern.

Stacked

Description heading (stacked)

Description text (stacked)

Data heading (stacked)

Data text (stacked)

  <div class="split-view split-view--stacked">
    <div class="split-view__description">
      <h3 class="split-view__heading">Description heading (stacked)</h3>
      <p class="split-view__text">Description text (stacked)</p>
    </div>
    <div class="split-view__data">
      <h3 class="split-view__heading">Data heading (stacked)</h3>
      <p class="split-view__text">Data text (stacked)</p>
    </div>
  </div>

Description

All split view patterns become stacked at smaller screen sizes. Based on the wrapper or container size, the stacked view could be the best way to show this information to the customer.

Grouped Content

How it Works

Learn more about your next steps and other resources useful for your scheduled participants and interviews.

Suggested email and interview link

You can preview your email or share this interview link with your scheduled participants.

View the page your participants will see

This is the customized page your participants will see when they join your scheduled interview session.

Check back after to watch your recordings

Your live recordings should be ready on your dashboard for viewing 30-60 minutes after the session.

  <div class="split-view">
    <div class="split-view__description">
      <h3 class="split-view__heading">How it Works</h3>
      <p class="split-view__text">Learn more about your next steps and other resources useful for your scheduled participants and interviews.</p>
    </div>
    <div class="split-view__data">
      <div class="split-view__group">
        <h3 class="split-view__heading">Suggested email and interview link</h3>
        <p class="split-view__text">You can preview your email or share this interview link with your scheduled participants.</p>
      </div>
      <div class="split-view__group">
        <h3 class="split-view__heading">View the page your participants will see</h3>
        <p class="split-view__text">This is the customized page your participants will see when they join your scheduled interview session.</p>
      </div>
      <div class="split-view__group">
        <h3 class="split-view__heading">Check back after to watch your recordings</h3>
        <p class="split-view__text">Your live recordings should be ready on your dashboard for viewing 30-60 minutes after the session.</p>
      </div>
    </div>
  </div>
  

Description

The grouped pattern organizes similar data/information together in a list pattern. The content using this pattern is usually educational and instruction driven.

Table

How it Works

Learn more about your next steps and other resources useful for your scheduled participants and interviews.

Header

Gender Any
Age 18 - 65+ years old
Countries Any
Income Any
Web expertise Any
Operating systems Any
Web browsers Any
Social networks Any
  <div class="split-view">
    <div class="split-view__description">
      <h3 class="split-view__heading">How it Works</h3>
      <p class="split-view__text">Learn more about your next steps and other resources useful for your scheduled participants and interviews.</p>
    </div>

    <div class="split-view__data">
      <h3 class="split-view__heading">Header</h3>
      <table class="table table--lined">
        <tbody>
          <tr>
            <td class="table__label">Gender</td>
            <td class="table__value">Any</td>
          </tr>
          <tr>
            <td class="table__label">Age</td>
            <td class="table__value">18 - 65+ years old</td>
          </tr>
          <tr>
            <td class="table__label">Countries</td>
            <td class="table__value">Any</td>
          </tr>
          <tr>
            <td class="table__label">Income</td>
            <td class="table__value">Any</td>
          </tr>
          <tr>
            <td class="table__label">Web expertise</td>
            <td class="table__value">Any</td>
          </tr>
          <tr>
            <td class="table__label">Operating systems</td>
            <td class="table__value">Any</td>
          </tr>
          <tr>
            <td class="table__label">Web browsers</td>
            <td class="table__value">Any</td>
          </tr>
          <tr>
            <td class="table__label">Social networks</td>
            <td class="table__value">Any</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  

Description

It is common to see a table in a split view component. The content using this pattern is usually metrics and numbers driven. See Tables to learn more.

Do

  • Optimize for legibility of the data within a split view

Don't

  • Nest split-view components in other split-view components

Accessibility

- Does not receive `:focus`