Components

Boxes

There are several box styles available to use, all of which are an expansion of the basic .box class. The width of the box depends on the width set to its parent container. All box styles should be used sparingly.

Note: All boxes have a default border-radius value of 4px.

Basic box

.box
Adds a simple border to a white box.

Example:

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of who…


Code:

<div class="box">
</div>

Highlighted box

.box-highlight
Adds a drop-shadow and a border to .box.

Example:

Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of who…


Code:

<div class="box box-highlight">
</div>

Resource box

You can use the resource box style if you are providing a link to a resource such as white paper, case study, factsheet, etc.

Code:

<div class="four-col box box-highlight resource">
<h2><a href="#">Resource title&nbsp;›</a></h2>
<p>Short description of why the resource is relevant.</p>
<p class="content-cat">E-book</p>
</div>

Example:

Resource title ›

Short description of why the resource is relevant.

E-book

Hero unit

A hero unit is composed of a main title, a subtitle or a short introduction, and an image that is representative of the page. Sometimes it can also include a call-to-action button and/or social buttons, which should be placed after the text (see example). When used, it should be the first section of a page.

Although this is not technically a component (it uses nothing more than simple elements and the default grid), you should follow the recommended markup.

Example:

This is a hero unit title

Here you can have a subtitle or short introduction to the page.


Main button

Ubuntu on a laptop

Code:

<div class="row row-hero">
 <div class="six-col">
  <h1>This is a hero unit title</h1>
  <p class="intro">Here you can have a subtitle or short introduction to the page.</p>
  <p><a class="link-cta-ubuntu">Main button</a></p>
 </div>
 <div class="six-col last-col">
  <img src="/wp-content/uploads/hero-unit-image.jpg" alt="Ubuntu on a laptop" />
 </div>
</div>

Muted headings and logos list

You can use the muted heading style to describe a list of icons or logos, or even a list of content.

Example:

Certified software

  • Centrify
  • Openbravo
  • Likewise

Code:

<h3 class="muted-heading">Certified software</h3>
<ul class="inline-logos no-bullets">
 <li><img src="http://assets.ubuntu.com/sites/ubuntu/1049/u/img/logos/logo-pack/logo-centrify.png" width="94" height="45" alt="Centrify" /></li>
 ...
</ul>

Back to top

The “back to top” component can be used to divide long pages of content and provide an easy way for scrolling back to the top of the page.

Code:

<div class="link-top"><a href="#">Back to top</a></div>