Standard page

See the components used on a standard content page. These pages start with a standfirst, in the style of the previous sentence, followed by a header (h2) and text content.

Header – h2

<p class="standfirst">Standfirst text.</p>
<h2>Header – h2</h2>

Header – h2 with paragraph and link text

At least one line of body text, which looks like this, should run under every heading level. Don’t stack an h3 header directly under an h2 header. Links should be descriptive and written in sentence case, a bit like this: Find out how to write link text in web content.

<h2>Header - h2 with paragraph and link text</h2>
<p>Body text goes here, <a href="#">links look like this</a>. More text if needed.</p>

Header – h3

At least one line of body text, which looks like this, should run under every heading level. Don’t stack an h3 header directly under an h2 header. Links should be descriptive and written in sentence case, a bit like this: Find out how to write link text in web content.

Header – h4

At least one line of body text, which looks like this, should run under every heading level. Links should be descriptive and written in sentence case, a bit like this: Find out how to write link text in web content.

Header – h5

At least one line of body text, which looks like this, should run under every heading level. Links should be descriptive and written in sentence case, a bit like this: Find out how to write link text in web content.

Bulleted lists

We have two styles for lists: ordered (more common) and unordered.

Before you start using them, read about:

• how bulleted lists aid website navigation
• the benefit of lists in body copy
• our house style for bulleted lists.

Unordered list

• Foundation year
• Year 1
• Year 2
• Year 3.

<ul>
	<li>Foundation year1</li>
	<li>Year 1</li>
	<li>Year 2</li>
	<li>Year 3.</li>
</ul>

Ordered list

1. Foundation year
2. Year 1
3. Year 2
4. Year 3.

<ol>
	<li>Foundation year</li>
	<li>Year 1</li>
	<li>Year 2</li>
	<li>Year 3.</li>
</ol>

Callout box for information

Callout boxes on the Student Hub can start with either:

• a short h3 heading, if there’s a chunk of information, or
• a buzz, if it’s just a note – we use Important:, Tip: and Example:.

<div class="callout information">
	<h3>Header here</h3>
<p><strong>Important:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, <a href="#">link text here</a>. Labore voluptas ipsam veritatis dolor recusandae quisquam porro magni enim harum, eos nesciunt rerum deserunt at, eaque nam assumenda quam consectetur voluptate!</p>
</div>

<div class="callout information">
	<p><strong>Important:</strong> Text goes here.</p>
</div>

Callout box for international students

Use these on all parts of the Student Hub except the International section. They should highlight information that is specific to international students.

<div class="callout additional">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <a href="#">link text here</a>. Labore voluptas ipsam veritatis dolor recusandae quisquam porro magni enim harum, eos nesciunt rerum deserunt at, eaque nam assumenda quam consectetur voluptate!</p>
</div>

Callout box for definitions

This is a legacy item we are trialling as an explainer or definition box. It should sit within the content, pulling out a section that would otherwise interrupt the flow of a page but is not significant enough to be a page of its own.

It should start with an h3 heading that outlines what you’re defining or explaining. Examples include Defining term time and Defining University-managed accommodation.

<div class="callout">
<h3>Defining...</h3>
<p>Content goes here</p>
</div>

CTA button

This call to action button should be used to drive users to complete a specific task they’re already aware of. Stick to two or three words, start with a verb and use caps.

REGISTER NOW

<p>
	<a class="button" href="https://direct.sussex.ac.uk/register.html">REGISTER NOW</a>
</p>

Accordions

Accordions are useful for containing large amounts of content, where only a small amount of that content is relevant to a particular person.

An example of this is collecting your keys, where a user only needs to access one piece of information.

Do not use accordions for data tables, vast amounts of copy or components other than text.

• Accordion 1

  Content goes here.

• Accordion 2

  Content goes here.

<ul class="accordion" data-accordion="" data-multi-expand="true" data-allow-all-closed="true">
    <li class="accordion-item" data-accordion-item=""><a class="accordion-title" href="#">Accordion 1</a>
        <div class="accordion-content" data-tab-content="">
            <p>Content goes here.</p>
        </div>
    </li>
    <li class="accordion-item" data-accordion-item=""><a class="accordion-title" href="#">Accordion 2</a>
        <div class="accordion-content" data-tab-content="">
            <p>Content goes here.</p>
        </div>
    </li>
</ul>

Forms

Forms are an effective method of gathering user data.

If you have been tasked with creating a form, read our guidance on starting a new project to make sure the work is not underway or covered somewhere else within the University.

Forms are created within the WCM. If you are unsure how to create a form please first read The WCM manual

If you require further assistance email DCM

Content blocks

Here is some pre-defined content.

Also block

You can also:

• email studentlifecentre@sussex.ac.uk
• call +44 (0)1273 876767.

<p>You can also:</p>
<ul>
	<li>email <a href="mailto:studentlifecentre@sussex.ac.uk">studentlifecentre@sussex.ac.uk</a></li>
	<li>call <a href="tel:+441273876767">+44 (0)1273 876767</a>.</li>
</ul> 

Can/cannot do block

You cannot:

• be self-employed, including any freelance work
• engage in business activity
• get a job as a professional sportsperson, sports coach or entertainer
• do a permanent, full-time job
• work if you overstay your visa.

Tables

Tables are used to convey data. They should not be used to lay-out information, structure a page or describe scenarios.

A simple column headed table

This table has column headers linked to data using the scope attribute. There is a caption to improve the experience for screen reader users. The width of the first column is extended using the rowspan attribute

    <table style="width: 100%;" border="0" cellpadding="10" align="left">
        <caption>Table of final claim deadlines</caption>
        <thead>
            <tr>
                <th scope="col">Level of study</th>
                <th scope="col">Assessment period</th>
                <th scope="col">Deadlines for 2020</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">Undergraduate, including foundation-year</td>
                <td>Semester 1</td>
                <td>Thursday 20 February</td>
            </tr>
            <tr>
                <td>Semester 2</td>
                <td>Tuesday 23 June</td>
            </tr>
            <tr>
                <td>Semester 1 module resits</td>
                <td>Tuesday 23 June</td>
            </tr>
            <tr>
                <td>Semester 2 and year-long module resits</td>
                <td>Tuesday 25 August</td>
            </tr>
            <tr>
                <td rowspan="4">Final-year undergraduate</td>
                <td>Semester 1</td>
                <td>Thursday 20 February</td>
            </tr>
            <tr>
                <td>Semester 2</td>
                <td>Tuesday 9 June</td>
            </tr>
            <tr>
                <td>Semester 1 module resits</td>
                <td>Tuesday 9 June</td>
            </tr>
            <tr>
                <td>Semester 2 and year-long module resits</td>
                <td>Tuesday 25 August</td>
            </tr>
            <tr>
                <td rowspan="4">Taught postgraduate</td>
                <td>Semester 1</td>
                <td>Thursday 27 February</td>
            </tr>
            <tr>
                <td>Semester 2</td>
                <td>Tuesday 7 July</td>
            </tr>
            <tr>
                <td>Semester 1 module resits</td>
                <td>Thursday 8 October</td>
            </tr>
            <tr>
                <td>Semester 2 and year-long module resits</td>
                <td>Thursday 8 October</td>
            </tr>
        </tbody>
    </table>