Miscellaneous

Notice that this page has only two columns! You need to add the two-column class on the div with a class of body-content.

A note on general utility classes

There is a section in the style sheet for 'Utility classes'. These are general classes you can apply to most elements. You can combine them in different ways. e.g. <p class="grey align-right little"> makes the text grey, aligns it to the right and makes it smaller:

This is small and grey.

You can see more examples on the Headings page. The Positioning images pages demonstrates general classes that you can use to position elements (not just images).

The tinted class

You can use the tinted class to provide a tinted background to elements. By default this background is grey:

But you can change the colour by adding another class. Note that we try to stick to three colours on the website (orange, blue, green). These are the brand colours (see the ELIXIR brand guidelines). The red and yellow below are for system messages or warnings only:

Links as buttons

There are styles to make an ordinary link look like a button. You might want a "Register" button for an event, for example, when the button is just a link to EventBrite and is not a form element. Here is <div class="button blue"><a href="">Button text</a></div>:

And here is <div class="button orange"><a href="">Button text</a></div>:

See the icon fonts page for examples of using icons with buttons.

Borders

There is a border class you can apply to any element.

This paragraph has the border class. The class is useful for images that have a white background.

• Link 1
• Back to the top