Views

Use the views module to switch between different HTML views (like tabs, but better).

Examples

Basic

Something

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.

Back to list view

Something Else

Back to list view

Another Thing

<div class="views-example js-views" data-current-view="list">
  <!-- List view -->
  <div class="views-example__view js-views__view" data-view-name="list">
    <ul>
      <li>
        <a href="" class="js-views__set-view" data-set-view="something">Read about something!</a>
      </li>
      <li>
        <a href="" class="js-views__set-view" data-set-view="something-else">Read about something else!</a>
      </li>
      <li>
        <a href="" class="js-views__set-view" data-set-view="another-thing">Read about another thing!</a>
      </li>
    </ul>
  </div>
  <!-- Detail view, item 1 -->
  <div class="views-example__view js-views__view" data-view-name="something">
    <a href="" class="js-views__set-view" data-set-view="list">Back to list view</a>
    <div class="row">
      <div class="col-12 col-md-4">
        <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=1" alt="" />
      </div>
      <div class="col-12 col-md-8">
        <div class="content">
          <h2>Something</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Detail view, item 2 -->
  <div class="views-example__view js-views__view" data-view-name="something-else">
    <a href="" class="js-views__set-view" data-set-view="list">Back to list view</a>
    <div class="row">
      <div class="col-12 col-md-4">
        <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=2" alt="" />
      </div>
      <div class="col-12 col-md-8">
        <div class="content">
          <h2>Something Else</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Detail view, item 3 -->
  <div class="views-example__view js-views__view" data-view-name="another-thing">
    <a href="" class="js-views__set-view" data-set-view="list">Back to list view</a>
    <div class="row">
      <div class="col-12 col-md-4">
        <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=3" alt="" />
      </div>
      <div class="col-12 col-md-8">
        <div class="content">
          <h2>Another Thing</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Nested Views

Back to list view

Switch layout

Something

Switch layout

Something

Back to list view

Switch layout

Something Else

Switch layout

Something Else

Back to list view

Switch layout

Another Thing

Switch layout

Another Thing

<div class="views-example js-views" data-current-view="list">
  <!-- List view -->
  <div class="views-example__view js-views__view" data-view-name="list">
    <ul>
      <li>
        <a href="" class="js-views__set-view" data-set-view="something">Read about something!</a>
      </li>
      <li>
        <a href="" class="js-views__set-view" data-set-view="something-else">Read about something else!</a>
      </li>
      <li>
        <a href="" class="js-views__set-view" data-set-view="another-thing">Read about another thing!</a>
      </li>
    </ul>
  </div>
  <!-- Detail view, item 1 -->
  <div class="views-example__view js-views__view" data-view-name="something">
    <a href="" class="js-views__set-view" data-set-view="list">Back to list view</a>
    
    <div class="views-example js-views" data-current-view="image-left">
      <!-- Image left view -->
      <div class="views-example__view js-views__view" data-view-name="image-left">
        <a href="" class="js-views__set-view" data-set-view="image-right">Switch layout</a>
        <div class="row">
          <div class="col-12 col-md-4">
            <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=1" alt="" />
          </div>
          <div class="col-12 col-md-8">
            <div class="content">
              <h2>Something</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Image right view -->
      <div class="views-example__view js-views__view" data-view-name="image-right">
        <a href="" class="js-views__set-view" data-set-view="image-left">Switch layout</a>
        <div class="row">
          <div class="col-12 col-md-8">
            <div class="content">
              <h2>Something</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=1" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Detail view, item 2 -->
  <div class="views-example__view js-views__view" data-view-name="something-else">
    <a href="" class="js-views__set-view" data-set-view="list">Back to list view</a>

    <div class="views-example js-views" data-current-view="image-left">
      <!-- Image left view -->
      <div class="views-example__view js-views__view" data-view-name="image-left">
        <a href="" class="js-views__set-view" data-set-view="image-right">Switch layout</a>
        <div class="row">
          <div class="col-12 col-md-4">
            <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=2" alt="" />
          </div>
          <div class="col-12 col-md-8">
            <div class="content">
              <h2>Something Else</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Image right view -->
      <div class="views-example__view js-views__view" data-view-name="image-right">
        <a href="" class="js-views__set-view" data-set-view="image-left">Switch layout</a>
        <div class="row">
          <div class="col-12 col-md-8">
            <div class="content">
              <h2>Something Else</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=2" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Detail view, item 3 -->
  <div class="views-example__view js-views__view" data-view-name="another-thing">
    <a href="" class="js-views__set-view" data-set-view="list">Back to list view</a>
    
    <div class="views-example js-views" data-current-view="image-left">
      <!-- Image left view -->
      <div class="views-example__view js-views__view" data-view-name="image-left">
        <a href="" class="js-views__set-view" data-set-view="image-right">Switch layout</a>
        <div class="row">
          <div class="col-12 col-md-4">
            <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=3" alt="" />
          </div>
          <div class="col-12 col-md-8">
            <div class="content">
              <h2>Another Thing</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Image right view -->
      <div class="views-example__view js-views__view" data-view-name="image-right">
        <a href="" class="js-views__set-view" data-set-view="image-left">Switch layout</a>
        <div class="row">
          <div class="col-12 col-md-8">
            <div class="content">
              <h2>Another Thing</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam corporis rerum velit pariatur ipsa, maiores, repellendus accusantium excepturi doloribus, ex quos facilis voluptates. Asperiores nulla corporis repudiandae exercitationem amet.</p>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <img width="300" height="300" class="lazyload-example js-lazyload" data-lazyload-src="https://picsum.photos/300?random=3" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>