Tabs organize logical chunks of content that are related and at the same level of hierarchy.
Tabs should always be preceded by primary content, although that does not mean they must always appear last on the page. When appropriate, a set of tabs may be followed by additional primary content.
See also: How to implement Tabs (in OU Campus)
Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tabs.scss#L9
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed iure, tempore eveniet culpa commodi est. Minima, nesciunt pariatur ipsum aliquam, accusamus neque eos culpa, quaerat consequatur, nisi quasi suscipit.
Unde, facere! Nobis eveniet dolorem, dolore aut doloremque nulla, deleniti ducimus rerum voluptatum sequi adipisci tenetur illum praesentium, placeat, voluptatibus fuga accusamus est consequatur inventore amet perferendis facere? Aspernatur, nisi.
Cupiditate tempora voluptates qui debitis fugiat natus impedit minima mollitia quis, quod corrupti blanditiis, magnam nobis officiis totam illum necessitatibus doloribus aliquam! Quasi, at doloribus laboriosam eveniet. Itaque aliquid, doloremque.
Vel et quidem est earum quod, eligendi ad reprehenderit pariatur mollitia similique voluptas provident, libero molestiae unde, iste repudiandae? Cupiditate, architecto, aliquid. Voluptatibus odit delectus accusamus, sint dignissimos. Enim, repudiandae?
Vel et quidem est earum quod, eligendi ad reprehenderit pariatur mollitia similique voluptas provident, libero molestiae unde, iste repudiandae? Cupiditate, architecto, aliquid. Voluptatibus odit delectus accusamus, sint dignissimos. Enim, repudiandae?
<div class="resp-tabs" id="tabs-accord-horz">
<ul class="resp-tabs-list">
<li><span class="resp-tab-title">Majors</span></li>
<li><span class="resp-tab-title">Minors</span></li>
<li><span class="resp-tab-title">Graduate Programs</span></li>
<li><span class="resp-tab-title">Graduate Certificates</span></li>
<li><span class="resp-tab-title">Departments</span></li>
</ul>
<div class="resp-tabs-container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sed iure, tempore eveniet culpa commodi est. Minima, nesciunt pariatur ipsum aliquam, accusamus neque eos culpa, quaerat consequatur, nisi quasi suscipit.</p>
</div>
<div>
<p>Unde, facere! Nobis eveniet dolorem, dolore aut doloremque nulla, deleniti ducimus rerum voluptatum sequi adipisci tenetur illum praesentium, placeat, voluptatibus fuga accusamus est consequatur inventore amet perferendis facere? Aspernatur, nisi.</p>
</div>
<div>
<p>Cupiditate tempora voluptates qui debitis fugiat natus impedit minima mollitia quis, quod corrupti blanditiis, magnam nobis officiis totam illum necessitatibus doloribus aliquam! Quasi, at doloribus laboriosam eveniet. Itaque aliquid, doloremque.</p>
</div>
<div>
<p>Vel et quidem est earum quod, eligendi ad reprehenderit pariatur mollitia similique voluptas provident, libero molestiae unde, iste repudiandae? Cupiditate, architecto, aliquid. Voluptatibus odit delectus accusamus, sint dignissimos. Enim, repudiandae?</p>
</div>
<div>
<p>Vel et quidem est earum quod, eligendi ad reprehenderit pariatur mollitia similique voluptas provident, libero molestiae unde, iste repudiandae? Cupiditate, architecto, aliquid. Voluptatibus odit delectus accusamus, sint dignissimos. Enim, repudiandae?</p>
</div>
</div>
</div>