Markup

Style guide

Images

Float images with class="right" or class="left". This will include a margin consistent with the grid.

Example:
<img src="/files/druplicon.small_.png" alt="Druplicon logo" class="left">

Links

Make action links look like buttons with "class="action-button".

Example:
<a href="#" class="action-button">Action button</a>

Action button

Text

Make text smaller with the <small> tag.

Example:
<small>Terms and conditions may apply!</small>

Terms and conditions may apply!

Layout

Example of aside-half. This block of content takes half of the content area, when the screen is wide enough.

left, right, and aside-half classes can be used.

Accordion

Heading of accordion section

Content of accordion section.

<div class="accordion">
  <h3 id="is-required">Heading of accordion section</h3>
  <div class="accordion-content">
    <p>Content of accordion section.</p>
  </div>

  <h3 id="another-section">Heading of another section</h3>
  <div class="accordion-content">
    <p>More content.</p>
  </div>
</div>

Avoid putting too much content in each accordion section. Consider putting long content on separate pages.