Project Name

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

Unordered List

  • ut enim ad minim veniam
  • occaecat cupidatat non proident
    • facilisis semper
    • quis ac wisi augue
    • risus nec pretium
    • fames scelerisque
  • nostrud exercitation ullamco
  • labore et dolore magna aliqua
  • aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

Ordered List

  1. ut enim ad minim veniam
    1. facilisis semper
    2. quis ac wisi augue
    3. risus nec pretium
    4. fames scelerisque
  2. occaecat cupidatat non proident
  3. nostrud exercitation ullamco
  4. labore et dolore magna aliqua
  5. aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

Definition List

A definition list — this is <dt>
A definition list — this is <dd> element.
A definition list — this is <dt>
A definition list — this is <dd> element.
A definition list — this is <dt>
A definition list — this is <dd> element.

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.

Id Product Name Value
1 Pencil cheap
2 Car expensive
<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

Id Product Name Value
1 Pencil cheap
2 Car expensive
<table class="bordertable">
...
</table>

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

Id Product Name Value
1 Pencil cheap
2 Car expensive
<table class="bordertable narrow">
...
</table>