Heading Levels

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..

Special Paragraphs

This is a paragraph text with class="highlight". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="dimmed". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box info". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box success". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box warning". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box error". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Misc. Elements

Blockquotes

This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element.

Preformatted Text

This is preformatted text, wrapped in a <pre> element. 
This is preformatted text, wrapped in a <pre> element.

Inline Semantic Text Decoration

• an anchor tag (<a>) example
• an italics and emphasize tag (<i>, <em>) example
• a big and small tag (<big>, <small>) example
• a bold and strong tag (<b>, <strong>) example
• an acronym and abbreviation tag (<acronym>, <abbr>) example
• a cite and quote tag (<cite>, <q> ) example
• a code and definition tag (<code>, <dfn>) example
• a teletype and keyboard tag (<tt>, <kbd>) example
• a variable and sample tag (<var>, <samp>) example
• an inserted and deleted tag (<ins>, <del>) example
• a _subscript and ^superscript tag (<sub>, <sup>) example
• a mark tag (HTML5) (<mark>) example

Media

Handling images and videos in flexible environments

Flexible Media (responsive)

.flexible {
  ...
  max-width: 100%;
}
/* IE6 support - 2% space for borders */
* html .flexible { width: 100%; }

By adding the CSS class .flexible to an image or video, you can allow the browser to downscale this element to fit the size of its parent element. It will not be upscaled in modern browsers (in old IE6 & 7 it will as part of the provided work-around.)

Media Borders

.bordered {
  ...
  border: 2px #eee solid;
  border: 2px rgba(255,255,255,1) solid;
  box-shadow: 0 0 3px rgba(0,0,0,.25);
}

You can add a border to your images or videos by adding the CSS class .bordered.

Important: When working with flexible media elements (images, videos with class .flexible) in an evironment that uses display:table to contain floats (e.g. static column .col3 in the column module or any element with class .contain-dt), make sure, your media elements are wrapped by any parent element with a defined width (any value except width:auto). Otherwise, some browsers (FF, IE9) will stretch the parent element (because of the behavior of tables) to make the media element fit at 100% width. See also Note 2 for .contain-dt in float section

Lists

Horizontal Arrangement

Floating Left

.float-left {
  float:left;
  display:inline;
  margin: 1.5em 1em 0 0;
} 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Centered

.center {
  display:block;
  text-align:center;
  margin: 1.5em auto 0 auto;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.

Floating Right

.float-right {
  float:right;
  display:inline;
  margin: 1.5em 0 0 1em;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Tables

Default Table Style

The default style for tables has left aligned cells and a minimal set of borders. Vertical alignment of table cells is set to top.

<table>
  <thead>
    <tr>
      <th> ... </th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      ...
    </tr>
  </tbody>
</table>

A classic table style can be achieved with CSS class .bordertable

<table class="bordertable">
...
</table>

Both table styles can be combined with CSS class .narrow to achieve smaller table rows (especially useful for big tables)

<table class="bordertable narrow">
...
</table>