Style Guide: HTML Elements

<style>
    .label {
        color: magenta;
        display: block;
        margin: 3em 0 1em;
    }
</style>
<span class="label">Heading one - NB this style should only be used within a hero</span>
<div class="h1-wrapper">
    <h1>University of
        <strong>Challenging yourself</strong>
    </h1>
</div>
<span class="label">Heading one (in body)</span>
<h1 class="h2">H1 Satisfaction, happiness and our connection to nature</h1>
<span class="label">Heading two</span>
<h2>H2 Satisfaction, happiness and our connection to nature</h2>
<span class="label">Heading three</span>
<h3>H3 Satisfaction, happiness and our connection to nature</h3>
<span class="label">Heading four</span>
<h4>H4 Satisfaction, happiness and our connection to nature</h4>
<span class="label">Heading five</span>
<div class="h5">H5 Satisfaction, happiness and our connection to nature</div>
<span class="label">Heading six</span>
<h6>H6 Satisfaction, happiness and our connection to nature</h6>
<span class="label">Default text paragraph</span>
<p>Product Design at Derby is aimed at creative people who may have studied Art and Design or Design Technology at school or developed a passion for the subject since leaving formal education. We will help you to
    <strong>build on your creativity</strong> and develop an understanding of the
    <em>reality of design</em> for manufacture.
    <a href="#">This is a link.</a> because we teach in small groups we can help you to develop your potential as an individual and support your enthusiasm for design.</p>
<span class="label">Large text paragraph</span>
<p class="large">Product Design at Derby is aimed at creative people who may have studied Art and Design or Design Technology at school or developed a passion for the subject since leaving formal education. We will help you to
    <strong>build on your creativity</strong> and develop an understanding of the
    <em>reality of design</em> for manufacture.
    <a href="#">This is a link.</a> because we teach in small groups we can help you to develop your potential as an individual and support your enthusiasm for design.</p>
<span class="label">Small text paragraph</span>
<p class="small">Product Design at Derby is aimed at creative people who may have studied Art and Design or Design Technology at school or developed a passion for the subject since leaving formal education. We will help you to
    <strong>build on your creativity</strong> and develop an understanding of the
    <em>reality of design</em> for manufacture.
    <a href="#">This is a link.</a> because we teach in small groups we can help you to develop your potential as an individual and support your enthusiasm for design.</p>
<span class="label">Unordered List</span> You’ll study modules such as:
<ul>
    <li>Making it: Materials and Manufacturing Processes</li>
    <li>Product Design Studies</li>
    <li>Innovation</li>
    <li>Computer Aided Product Design</li>
    <li>Design Evaluation</li>
    <li>Context: Being a Product Designer</li>
</ul>
<span class="label">Unordered List Reordered</span>
<ul class="reorder-list">
    <li>Business Management (Joint Honours)</li>
    <li>International Business (Top up) BA (Hons)</li>
    <li>Economics Joint Honours</li>
    <li>Business Management (Finance) BA (Hons)</li>
    <li>International Business with Foundation Year BA (Hons)</li>
    <li>Business and Management (CMI accredited) HND</li>
</ul>
<span class="label">Ordered List</span> You’ll study modules such as:
<ol>
    <li>Making it: Materials and Manufacturing Processes</li>
    <li>Product Design Studies</li>
    <li>Innovation</li>
    <li>Computer Aided Product Design</li>
    <li>Design Evaluation</li>
    <li>Context: Being a Product Designer</li>
</ol>

<span class="label">Feature block</span>
<section class="feature-block">

    <p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
    <p>Now DEFRA (Department for the Environment, Food and Rural Affairs) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>
</section>

<span class="label">Feature block with link and button</span>
<section class="feature-block">
    <p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
    <p>Now DEFRA (<a href=\ "#\">Department for the Environment, Food and Rural Affairs</a>) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>
    <p><a href="#" class="button-blue" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a></p>
</section>

<span class="label">Feature block black</span>
<section class="feature-block-black">

    <p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
    <p>Now DEFRA (Department for the Environment, Food and Rural Affairs) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>
</section>

<span class="label">Feature block black with link and button</span>
<section class="feature-block-black">
    <p>Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
    <p>Now DEFRA (<a href=\ "#\">Department for the Environment, Food and Rural Affairs</a>) has made re-connecting people with nature a key theme in its new 25-year plan; a document that our researchers contributed to.</p>
    <p><a href="#" class="button-white" role="button" tabindex="0" data-scroll>
        Book an open day
            <span class="button-overlay"><span>
                        Book an open day
                    </span></span></a></p>
</section>

<span class="label">Table element - with table header</span>
<table>
    <thead>
        <tr>
            <th></th>
            <th>Information</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Specific requirements at A-level</td>
            <td>At least a C in an Art and Design or Design Technology subject at A-level (or equivalent qualification)</td>
        </tr>
        <tr>
            <td>Specific requirements at GCSE</td>
            <td>Five GCSEs at or above Grade C (or Grade 4), including Maths and English</td>
        </tr>
        <tr>
            <td>Interview / Audition</td>
            <td>Yes - see interview details</td>
        </tr>
        <tr>
            <td>Porfolio</td>
            <td>Yes - please see below</td>
        </tr>
    </tbody>
</table>

<span class="label">Table element - without table header</span>
<table>
    <tbody>
        <tr>
            <td>UCAS points</td>
            <td>96-112 (up to 16 from AS-levels)</td>
        </tr>
        <tr>
            <td>Specific requirements at A-level</td>
            <td>At least a C in an Art and Design or Design Technology subject at A-level (or equivalent qualification)</td>
        </tr>
        <tr>
            <td>Specific requirements at GCSE</td>
            <td>Five GCSEs at or above Grade C (or Grade 4), including Maths and English</td>
        </tr>
        <tr>
            <td>Interview / Audition</td>
            <td>Yes - see interview details</td>
        </tr>
        <tr>
            <td>Porfolio</td>
            <td>Yes - please see below</td>
        </tr>
    </tbody>
</table>

<span class="label">Table element - multiple columns</span>
<table>
    <thead>
        <tr>
            <th>Room Type</th>
            <th>Located at which halls?</th>
            <th>Quantity across Derby</th>
            <th>What's included?</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Standard</td>
            <td>SPHC, PAC, SCC, LH </td>
            <td>1000</td>
            <td>In room: single bed, wash basin, wardrobe, desk and chair.</td>
        </tr>
        <tr>
            <td><a href="#">En-suite</a></td>
            <td>SPHC, PAC </td>
            <td>50</td>
            <td>In room: small double bed, en suite, wardrobe, desk, chair, storage space, modern décor.</td>
        </tr>
        <tr>
            <td>Bigger en-suite</td>
            <td>SPHC, PAC </td>
            <td>300</td>
            <td>In room: small double bed, en suite, wardrobe, desk, chair, storage space</td>
        </tr>
    </tbody>
</table>

<span class="label">Table element - multiple columns example - UDOL fees</span>
<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Per 20 credits</th>
            <th>Modules</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>UK/EU/International</td>
            <td>£880</td>
            <td>7&nbsp;(six 20-credit modules and one 60-credit module)</td>
            <td>£7,920<sup>†</sup></td>
        </tr>
    </tbody>
</table>
<span class="label">Table element - contact details</span>
<section class="text-block">
    <table>
        <thead>
            <tr>
                <th>Contact</th>
                <th>Telephone</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Senior International Recruitment Officer: Ula Tang-Plowman</td>
                <td><a href="tel:441332594350">+44 (0)1332 591446</a></td>
                <td><a href="mailto:[email protected]">[email protected]</a></td>
            </tr>
        </tbody>
    </table>
</section>