Digital

Page layout

Rightcol h3

All content in the right column should be bracketed between two snippet divs. The first snippet div should be Presentation - Raw HTML and type Snippet: Column - rightcol [start]. The final div should be Presentation - Raw HTML and type Snippet: Column - rightcol [end].

If the right column contains more than one heading, insert an h3 heading titled "Further information" at the top and use h4 for subsequent headings.

Use h4 for sub headings

Regular text should be in paragraphs contained between standard paragraph <p>...</p> tags.

Layout and code help for your matrix web pages.

  1. General text
  2. Images
  3. Headings
  4. Lists
  5. Highlight boxes
  6. Tables
  7. Files
  8. Call to action devices

General Text

Introduction

A page should always start with a single paragraph with the class "introduction" applied.

<p class="introduction">[introduction copy]</p>

Copy

All normal paragraphs that follow the introduction should be surrounded with the standard paragraph tag:

<p>[copy]</p>

If a right column is present, all content in this main middle column should be bracketed between two snippet divs. These are Column - leftcol [start] and Column - leftcol [end]. Please refer to the right column for snippet div information.

The resultant code will appear as below:

<div class="leftcol"><p>[Content text]</p></div>
 

Back to top

Images

Images should be cropped to 165x165 pixels. Do this before uploading the image into Matrix. Images can be placed to the left or right of a column using classes "floatleft"or "floatright" respectively. Applying a class "border" will apply a standard 1 pixel border around the image. Ensure that the default 0 thickness border parameter in the Insert Image dialog in Matrix is deleted.

Bordered image floated right

<img src="IMG URL" height="165px" width="165px" 
alt="alternate text" class="floatright border">

Bordered image floated left

<img src="IMAGE URL" height="165px" width="165px" 
alt="alternate text" class="floatleft border">

Borderless image floated right

<img src="IMAGE URL" height="165px" width="165px" alt="alternate text" class="floatright">

Borderless image floated left

<img src="IMAGE URL" height="165px" width="165px" alt="alternate text" class="floatleft">

Applying the img_borders class

If there are multiple images on a page, rather than adding the border class to each image, you can apply an "img_borders" class to the content div which will apply a border to every image within the div.

<div class="img_borders">MULTIPLE IMAGES WITHIN DIV</div>


Back to top

Headings

This is a h3 without any classes applied

You can use a Heading 3 without any classes applied. Heading 1 is used in the black banner, Heading 2 is the page name in the sandstone title bar. Within the white space of the page you should always start with Heading 3.

<h3>h3 heading text</h3>

Heading next to an image

The "margin-right-185" and "margin-left-185" classes are used when there is a floated image next to elements, so that they will shift across properly.

If the image is right aligned, a heading placed to the "left" of an image should have the classes "underline margin-right-185" applied.




<h3 class="underline margin-right-185">heading</h3>

If the image is left-aligned, a heading placed to the "right" of an image should have the classes "underline margin-left-185" instead.

<h3 class="underline margin-left-185">heading</h3>

Heading 3 with the class "underline" applied

If you only use the "underline" class (without specifying the margin) on the Heading 3, the underline will span the full width of the div and there won't be any margin for layout around images.

 <h3 class="underline">Underlined h3 heading</h3>

Heading 3 with the class "overline" applied

The overline class should only be applied to a Heading3 on a pages that contains a table of contents, with "back to top" links.

<h3 class="overline">Overlined h3 heading</h3>

Sub headings use Heading 4

<h4>h4 heading</h4>

There are no classes for Heading 4 or Heading 5. It is unlikely you will use a Heading 6.

This is a h5

Heading 5 is the lowest level heading to be used.

<h5>h5 heading</h5>

If unspecified use a h3, with or without the classes of "underline", "margin-right-185" or "margin-left-185".


Back to top

Highlightboxes

Apply the "highlightbox" class to a paragraph to make it stand out.

For a single line highlightbox:

This is the "highlightbox" class applied to a paragraph tag.

<p class="highlightbox">[highlightbox copy]</p>

For a multi-line highlightbox:

Create a div with class highlightbox applied, and place the multiple paragraphs inside.

<div class="highlightbox">
<p>[highlightbox copy]</p>
<p>[more highlightbox copy]</p>
</div>

Back to top

This is multi-line #1

This is multi-line #2

This is multi-line #3


Lists

Unordered lists

Regular unordered lists need no class. The default bullets will display automatically. Regular lists should not be too long.

  • Quisque venenatis arcu semper leo.
  • Donec at risus sed eros suscipit semper.
  • Vestibulum tempor urna quis felis.
<ul>
<li>[regular list copy]</li>
</ul>

For lists of links, apply a class of "linklist" to the ul element.

<ul class="linklist">
<li>[linklist copy]</li>
</ul>

When lists hold a lot of information per point apply the class "listpadding" for extra padding between list items.

  • Aliquam euismod neque feugiat massa vulputate sollicitudin. Maecenas magna ante, sodales a, accumsan quis, iaculis ac, pede. Aenean in metus. Quisque ac turpis. Nulla venenatis imperdiet est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  • Quisque adipiscing molestie nibh. Mauris lobortis tempor neque. Quisque aliquet. Maecenas ornare, sem sed pellentesque commodo, tellus nunc ultricies mauris, et auctor mauris felis non orci. Proin eget massa lobortis nisl facilisis lacinia. Aenean nec lorem. Vivamus elit. Sed auctor turpis id lacus dapibus pellentesque. Donec tellus magna, tempor eget, faucibus in, volutpat non, ipsum. Maecenas in velit.
<ul class="listpadding">
<li>[extra padding list copy]</li>
</ul>

Ordered lists

Ordered lists require no class to be applied.

  1. Morbi pulvinar ante facilisis metus.
  2. Donec a est mattis nulla euismod dapibus.
  3. Mauris tincidunt odio ac magna.
<ol>
<li>[regular list copy (one to two lines per list item)]</li>
</ol>

If an alphabetical list notation is desired, add a class of "list-lower-alpha".

  1. Suspendisse ac metus in nisi facilisis imperdiet.
  2. In adipiscing turpis commodo purus.
  3. Ut pretium consequat metus.

When placing jump links at the top of the page, which link to anchors further down the same page, apply the class "toc" to the ordered list element.

  1. Vestibulum non leo faucibus arcu tempor dapibus.
  2. Vestibulum adipiscing urna ullamcorper enim.
  3. Fusce id eros tristique nisi tincidunt condimentum.
<ol class="list-lower-alpha">
<li>[regular list copy (one to two lines per list item)]</li>
</ol>

Definition lists

When information consists of a list of terms with copy to define them, a definition list with class "list" should be used.

Aliquam faucibus
Praesent ullamcorper iaculis odio
Fusce vehicula laoreet eros
Proin at urna id massa posuere aliquam. Vestibulum suscipit sollicitudin sem.
Fusce vel arcu in lacus dictum ullamcorper
Proin porta. Donec non augue. Duis commodo nisi varius erat.

In a similar fashion, when the information consists of a list of terms with copy to define them, with the added extra fact that they are also links, a definition list with class "linklist" should be used.

<dl class="list">
<dt>[list copy (for list items with definitions)]</dt>
<dd>A definition for that item, such as a short description.</dd>
</dl>
<dl class="linklist">
<dt>[linklist copy (for linked list items with definitions)]</dt>
<dd>A definition for that link, such as a short description.</dd>
</dl>

Back to top

Tables

Tables should be used sparingly, and only for the display of tabular data. They should never be used as a page layout structure. Before applying a table, ask if the data can be shown in an alternative way. Could it be displayed using definition lists or headings? Could it be displayed via an embedded Excel spreadsheet?

The following table has the classes "ruled altrow" applied. The 'ruled' class will apply a 1 pixel line between rows. The 'altrow' class needs an additional 'dark' class to be applied to each alternate table row tag <tr class="dark"> to have alternate shaded rows visible.

Always markup the table head <th> cells.

Table Head cell Table Head cells Table Head cells
Data Data Data
Data Data Data
Data Data Data
Data Data Data
<table class="ruled altrow">[Table Fields]</table>

[alternate]<tr class="dark">

Here is a useful tutorial on creating accessible tables

You can find an excellent accessibility tagging tool for tables at Accessify.

Back to top

Files (non-html)

Non-html file types are always identified with type and file size in order to warn the reader of the download, and that they are about to launch an additional application.

Where possible, avoid providing content in PDF format only due to accessibility reasons, and either provide the content within the web page or in Rich Text Format (RTF) format as well.

Back to top

Call to action devices

A tall background image will appear visually more appealing when expanded to fit copy height.


Back to top


<div class="bevelbutton"> <div class="border-top"> <div class="border-right">
<div class="border-bottom"> <div class="border-left">
<a href="[URL]" title="Link title">
<span style="background-image: url([URL]"><strong>Link title</strong>
<span>Link description</span>
<span>Secondary description only if necessery</span>
</span>
</a>
<div class="top-left"></div> <div class="top-right"></div>
<div class="bottom-left"></div> <div class="bottom-right"></div>
</div><!-- eo.border-left --> </div> <!-- eo.border-bottom --> </div>
<!-- eo.border-right --> </div> <!-- eo.border-top --></div><!-- eo.button -->