Tabs

The tabs pattern organises similar pieces of content that do not need to be shown to the user simultaneously. Users can move between tabs to see each piece of content

Rules for tabs

  • Use tabs when you want to show content that is related but isn't meant to be compared by the user.
  • There should be between two and five tabs, provided tabs do not wrap onto multiple rows when displayed horizontally.
  • Tabs are displayed vertically on small displays. This behaviour can be overridden by adding the class .nav-tabs--full-width.

Options available

Tabs

  • This option must only be used in the main content container, not in the aside.
  • This option must not feature images or embedded media
Example

In your first year, you must take the following two modules:

Second year students must take the following two modules:

  • Mediaeval and Renaissance Texts: introduces early forms of English language and literature, using specially edited texts from Old English, Middle English and Older Scots.
  • Drama: Reading and Performance: introduces a number of representative plays from the Renaissance period and from the twentieth century. Emphasis is placed upon the context in which these plays were first created and those in which they are now received.

If you decide to take English in your third and fourth years, you choose from a wide variety of advanced options, including modules in Old English, Renaissance literature, Romanticism, the Victorian novel, literary theory, Scottish verse, Restoration drama, Shakespeare, modern American drama, contemporary fiction, creative writing and playwriting.

Here is a sample of Honours modules which have been offered in previous years:

  • Beowulf
  • The Younger Romantics: Poetry and Prose (1810-1830)
  • Postcolonial Literature and Theory
  • Romantic Writing and Women
  • Contemporary British Fiction
  • Civil Wars on Page and Screen

In fourth year, students also undertake a 10,000 word dissertation on a topic of their choice. This independent project enables you to develop key research skills which are desired by both prospective employers and by graduate schools offering postgraduate degrees.

Code 
<!-- Begin pattern: tabs //-->
<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="tabs-container">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active in" role="presentation"><a aria-selected="true" href="#tab-1" data-toggle="tab" aria-controls="tab-1" role="tab">First year</a></li>
                    <li class="" role="presentation"><a aria-selected="false" href="#tab-2" data-toggle="tab" aria-controls="tab-2" role="tab">Second year</a></li>
                    <li class="" role="presentation"><a aria-selected="false" href="#tab-3" data-toggle="tab" aria-controls="tab-3" role="tab">Honours</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="tab-1" role="tabpanel">
                        <p>In&nbsp;your first year, you must take the following two modules:</p><ul><li><a href='#'>Culture and Conflict: An introduction to Nineteenth- and Twentieth-Century Literature</a>:&nbsp;introduces a small number of texts, in prose and verse, from the nineteenth and twentieth centuries.</li><li><a href='#'>Explorers and Revolutionaries: Literature 1680-1830</a>:&nbsp;examines travel, colonialism, and different constructions of “man’s natural estate” in the early eighteenth century.</li></ul>
                    </div>
                    <div class="tab-pane fade " id="tab-2" role="tabpanel">
                        <p>Second year students must take the following two modules:</p><ul><li><a href='#'>Mediaeval and Renaissance Texts</a>:&nbsp;introduces early forms of English language and literature, using specially edited texts from Old English, Middle English and Older Scots.</li><li><a href='#'>Drama: Reading and Performance</a>:&nbsp;introduces a number of representative plays from the Renaissance period and from the twentieth century. Emphasis is placed upon the context in which these plays were first created and those in which they are now received.</li></ul>
                    </div>
                    <div class="tab-pane fade " id="tab-3" role="tabpanel">
                        <p>If you decide to take English in your third and fourth years, you choose from a wide variety of advanced options, including modules in Old English, Renaissance literature, Romanticism, the Victorian novel, literary theory, Scottish verse, Restoration drama, Shakespeare, modern American drama, contemporary fiction, creative writing and playwriting.</p><p>Here is a sample of Honours modules which have been offered in previous years:</p><ul><li>Beowulf</li><li>The Younger Romantics: Poetry and Prose (1810-1830)</li><li>Postcolonial Literature and Theory</li><li>Romantic Writing and Women</li><li>Contemporary British Fiction</li><li>Civil Wars on Page and Screen</li></ul><p>In fourth year, students also undertake a 10,000 word dissertation on a topic of their choice. This independent project enables you to develop key research skills which are desired by both prospective employers and by graduate schools offering postgraduate degrees.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: tabs //-->

Horizontal tabs

This example uses the .nav-tabs--full-width class to force the tabs to always appear horizontally.

Example
Code 
<!-- Begin pattern: tabs //-->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="tabs-container">
                <ul class="nav nav-tabs nav-tabs--full-width" role="tablist">
                    <li class="active in" role="presentation"><a aria-selected="true" href="#tab-read" data-toggle="tab" aria-controls="tab-read" role="tab">Read</a></li>
                    <li class="" role="presentation"><a aria-selected="false" href="#tab-shared" data-toggle="tab" aria-controls="tab-shared" role="tab">Shared</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="tab-read" role="tabpanel">
                        <ul><li><a href='#'>How we schedule work requests from other projects</a> </li><li><a href='#'>How we fixed our YouTube channel</a></li><li><a href='#'>A to Z of social media</a></li><li><a href='#'>Making web pages more accessible with WAI-ARIA</a> </li><li><a href='#'>Why we have code standards and style guides</a> </li></ul>
                    </div>
                    <div class="tab-pane fade " id="tab-shared" role="tabpanel">
                        <ul><li><a href='#'>How we schedule work requests from other projects</a> </li><li><a href='#'>How we fixed our YouTube channel</a></li><li><a href='#'>A to Z of social media</a></li><li><a href='#'>Making web pages more accessible with WAI-ARIA</a> </li><li><a href='#'>Why we have code standards and style guides</a> </li></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: tabs //-->