Elements

Table of contents


<!--Table of contents-->
<div class="table-of-contents padding-top--4 padding-bottom-md--3">
    <h3 class="table-of-contents__title">Table of contents (h3)</h3>
    <ul id="toc" class="table-of-contents__list">
        <li class="table-of-contents__item">
            <a href="#" class="js-scroll">Anchor links are li's</a>
        </li>
        <li class="table-of-contents__item">
            <a href="#" class="js-scroll">Spacing equivalent to 44px line height</a>
        </li>
        <li class="table-of-contents__item">
            <a href="#" class="js-scroll">24px line height per li</a>
        </li>
    </ul>
</div>

Ordered list

  1. Ordered list item
  2. A list item
  3. Another list item. This is very very very very very very very very very very very very very very very very very very very very long just to show you how it spreads in two different lines
  4. List item

<ol class="styled-ol">
    <li>Ordered list item</li>
    <li>A list item</li>
    <li>Another list item. This is very very very very very very very very very very very very very very very very very very very very long just to show you how it spreads in two different lines</li>
    <li>List item</li>
</ol>

Unordered list

  • Unordered list item
  • A list item
  • Another list item. This is very very very very very very very very very very very very very very very very very very very very long just to show you how it spreads in two different lines
  • List item

<ul class="styled-ul">
    <li>Unordered list item</li>
    <li>A list item</li>
    <li>Another list item. This is very very very very very very very very very very very very very very very very very very very very long just to show you how it spreads in two different lines</li>
    <li>List item</li>
</ul>

Tabs

More than half (58%) of allergic consumers said that their overall experience of eating out has improved; just 6% said it has got worse. As a result, a similar proportion (52%) say they now feel more confident eating out than they did before the legislation was introduced.


<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane in active">
        <p>More than half (58%) of allergic consumers said that their overall experience of eating out has improved; 
        just 6% said it has got worse. As a result, a similar proportion (52%) say they now feel more confident eating 
        out than they did before the legislation was introduced.</p>
    </div>
    <div id="menu1" class="tab-pane">
        <p>More than two-thirds (69%) have experienced staff not understanding the severity of an allergy, and how 
        easily a mistake can cause a reaction.</p>
    </div>
    <div id="menu2" class="tab-pane">
        <p>A similar number (68%) have seen staff with a lack of knowledge of what's on the menu or in the food 
        – including staff confusing eggs with dairy, or assuming that the customer was asking for gluten-free 
        rather than avoiding lupin (a grain commonly used in place of wheat). </p>
    </div>
    <div id="menu3" class="tab-pane">
        <p>Over half of allergic consumers (56%) said they have been made to feel like an inconvenience due to 
        their allergy.</p>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../assets/js/helpers.js"></script>

Accordion

In total, around a third of those with a food allergy have suffered a reaction in the last year when eating out of the home. The vast majority of these (25%) took place in a restaurant or cafe, with 9% being a result of takeaway food. In most cases (88%) the reaction was self-treated, with 19% of reactions resulting in a hospital visit.
If anyone encounters a food business not providing information on the 14 allergens, they should report it to its local authority which will investigate.

<!--accordion-->
<div class="padding-bottom--4"></div>
<div class="accordion--header">
    <h5>
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Collapsible section header (same formatting as h5)
        </a>
    </h5>
</div>
<div id="collapseOne" class="col-wrap collapse in">
    <div class="col col--fluid-15 margin-top--1 accordion--body">
        In total, around a third of those with a food allergy have suffered a reaction in the last year 
        when eating out of the home. The vast majority of these (25%) took place in a restaurant or cafe, 
        with 9% being a result of takeaway food. In most cases (88%) the reaction was self-treated, with 19% 
        of reactions resulting in a hospital visit.
    </div>
</div>
<div class="accordion--header">
    <h5>
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            Collapsible section header
        </a>
    </h5>
</div>
<div id="collapseTwo" class="col-wrap collapse">
    <div class="col col--fluid-15 margin-top--1 accordion--body">
        If anyone encounters a food business not providing information on the 14 allergens, they should report 
        it to its local authority which will investigate.
    </div>
</div>

Tags


<div class="tag-wrapper">
    <a href="#" class="tags"><span>Tag</span></a>
    <a href="#" class="tags"><span>Longer tag</span></a>
    <a href="#" class="tags"><span>Even longer tag</span></a>
    <a href="#" class="tags"><span>Longer tag</span></a>
    <a href="#" class="tags"><span>Even longer tag</span></a>
    <a href="#" class="tags"><span>Even longer tag</span></a>
    <a href="#" class="tags"><span>Tag</span></a>
    <a href="#" class="tags"><span>Even longer tag</span></a>
    <a href="#" class="tags"><span>Longer tag</span></a>
    <a href="#" class="tags"><span>Tag</span></a>
</div>