This page collects the everyday building blocks that a page author can drop straight into the body of a ucam2012 page. Each block below is written in ordinary HTML; the Project Light stylesheet takes care of the appearance. For the full reference, see the Project Light component guide.

Typography

Ordinary paragraphs need no special markup. Use <h2> to <h4> for section headings (the page title and its big <h1> are supplied by the template). Inline, you can use emphasis, strong emphasis, literal code, sample output like this, user input like this, and a variable such as filename.

Links

An ordinary link within cam.ac.uk looks different from a link to an external site, which the stylesheet automatically flags with an external-link marker.

Prefix a link with an icon to signal the type of its target:

PDF document
Word document
Excel spreadsheet
Restricted document

Call-to-action buttons draw attention to the most important link in a block:

Primary action Secondary action

Lists

Bulleted and numbered lists use plain <ul> and <ol>:

• First item
• Second item, which can run on to some length and will wrap neatly
• Third item

1. Step one
2. Step two
3. Step three

A definition list pairs terms with descriptions:

Ucampas

The template processor that produces these pages.

Project Light

The University of Cambridge house style that ucam2012 implements.

Tables

Add the classes campl-table campl-table-striped campl-table-bordered to a <table> for the standard Project Light styling. Use <thead> for the header row so it can be styled and repeated correctly.

Images

Give an <img> the class campl-scale-with-grid so that it shrinks responsively on narrow screens, and add campl-float-left or campl-float-right to make the surrounding text flow around it. Place the image as its own element immediately before the paragraph it should sit alongside, rather than inside the <p>: on a narrow screen the float is automatically dropped, and the image then stacks tidily above the text instead of becoming its first “word”.

Without a float class, an image simply sits on its own line. This paragraph is padded out so that the floated image on the right has enough text to wrap against on a wide screen: lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, quis nostrud exercitation ullamco.

Blockquotes

A <blockquote> is set in a large decorative style. Mark the closing paragraph class="campl-quote-mark" to add the oversized closing quotation mark, and follow it with a <cite> for the attribution:

The best way to predict the future is to invent it.

And the best way to invent it is to build it, test it, and rebuild it until it works.

Alan Kay

Notification and alert boxes

Highlight an important message with a notification panel. Four severities are available; each takes a campl-notifications-icon lead-in followed by the message text: