Style Guide: HTML Elements

<style>
    .label {
        color: magenta;
        display: block;
        margin: 3em 0 1em;
    }
</style>
<span class="label">Heading one</span>
<div class="h1-wrapper">
    <h1>University of
        <strong>Challenging yourself</strong>
    </h1>
</div>
<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>
<h5>H5 Satisfaction, happiness and our connection to nature</h5>
<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">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>
{% include '@feature-block' with { content: "
<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>" } %}

<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>En-suite</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>