Global Navigation

Your Sitename.
Your slogan.

Main Navigation

Sub-Navigation

Content

MIDDLE COLUMN

REFERENCE FONT SIZE AND COLOR

How it works

  • Default: Defined in .content-font
  • Effects: Sets default font property for the middle column.
  • Options: Modify text color locally.
  • Method: Apply generic CSS-lass .txt-zz (zz=colorcode) to text-related HTML-tags. See Sections 3, 6 and 8 for details.
BOX LAYOUT

How it works

  • Default: None
  • Options:
    - Full width (.contentbox-container-full)
    - Half width left (.contentbox-container-left)
    - Half width left (.contentbox-container-right)
  • Method: Select one of the listed CSS-classes.

Examples

 
Full width

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 
Half-width left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 
Half-width right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


BOX BACKGROUND

How it works

  • Default: Transparent.
    - Defined in (.contentbox-shading)
  • Options: Modify background colors.
  • Method: Apply generic CSS-class .bg-zz (zz=colorcode) and choose among the available background colors.

Examples

 
Lorem Ipsum

Default box background shading (transparent).


 
Lorem Ipsum

Darker background shading.


BOX TEXT

How it works

  • Default: As given by reference font (see Section 0).
  • Options: Modify text colors.
  • Method: Apply generic CSS-class .txt-zz (zz=colorcode) and choose among the available text colors.

Examples

 
Lorem Ipsum

Default text color.

 
Lorem Ipsum

Lighter text color.

 
Lorem Ipsum

Darker text color.


TITLE STYLE

How it works

  • Default: None.
  • Options:
    - Only text
    (.contentbox-title-noshading-noline)
    - Text, with underline
    (.contentbox-title-noshading-line)
    - Text with shading
    (.contentbox-title-shading)
  • Method: Select one of the the listed CSS classes.

Examples

 
Only text
 
Text with underline
 
Text with shading

TITLE BACKGROUND

How it works

  • Default: Light grey.
    - Defined in (.contentbox-title-shading)
  • Options: Modify background colors.
  • Method: Apply generic CSS-class .bg-zz (zz=colorcode) and choose among the available background colors.

Examples

 
Default title background
 
Darker background shading

TITLE TEXT

How it works

  • Default: As given by reference font (see Section 0).
  • Options: Modify text colors.
  • Method: Apply generic CSS-class .txt-zz (zz=colorcode) and choose among the available text colors.

Examples

 
Default title text

 
Lighter text

 
Darker text

TITLE DECORATION

How it works

  • Default: On.
  • Options:
    - Turn box on/off.
    - Modify shading.
    - Modify text color.
  • Method: Apply generic CSS-classes.
    - Turn box on/off: Apply generic CSS-class (.box-on or .box-off)
    - Modify shading: Apply generic CSS-class .bg-zz (zz=colorcode) and choose among the available background colors.
    - Modify text color: Apply generic CSS-class .txt-zz (zz=colorcode) and choose among the available text colors.

Examples

 
Decoration box - default
 
Decoration box - off

 
Decoration box - on (lighter)

Decoration box - on (darker, with text)

PARAGRAPH TEXT

How it works

  • Default: As given by reference font (see Section 0).
  • Further formats:
    - Headings
    - Paragraph
    - Quote
    - Embedded emphasis
    - Unordered list
    - Ordered list
  • Method: Apply generic CSS-classes.
    - Modify shading: Apply generic CSS-class .bg-zz (zz=colorcode) and choose among the available background colors.
    - Modify text color: Apply generic CSS-class .txt-zz (zz=colorcode) and choose among the available text colors.

Examples


Headings

Heading h1 (h1)

Heading h2 (h2)

Heading h3 (h3)


Normal paragraph (p)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Quote (.quote)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Embedded emphasis (.embed .embed-caption)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer "Amet elit door sit at amet sit at door Amet elit."Embedded Caption adipiscing elit Lorem ipsum dolor sit. orem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit elit. orem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet.


Unordered list (ul)

  • Unordered List
  • Uses a custom bullet to make items pop

Ordered list (ol)

  1. Ordered List
  2. Uses a tag to style the numbers

PARAGRAPH TABLE

How it works

  • Default: Shading: Light-Grey, Text: Dark-grey.
  • Options: Modifications can be cone for the entire table <table>, entire rows <tr>, or individual cells <td>.
    - Modfify cell shading.
    - Modify cell text color.
  • Method: Apply generic CSS-classes.
    - Modify cell shading: Use CSS-class .bg-zz (zz=colorcode) and choose among the available background colors.
    - Modify cell text color: Use CSS-class .txt-zz (zz=colorcode) and choose among the available text colors.

Examples

Two-columns (default)

Column 1Column 2
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2
Row 3, Column 1Row 3, Column 2

Table x.x. Caption

Three-columns (default)

Column 1Column 2Column 2
Row 1, Column 1Row 1, Column 2Row 1, Column 3
Row 2, Column 1Row 2, Column 2Row 2, Column 3
Row 3, Column 1Row 3, Column 2Row 3, Column 3

Table x.x. Caption

Four-columns (default)

Column 1Column 2Column 2Column 2
Row 1, Column 1Row 1, Column 2Row 1, Column 3Row 1, Column 4
Row 2, Column 1Row 2, Column 2Row 2, Column 3Row 2, Column 4
Row 3, Column 1Row 3, Column 2Row 3, Column 3Row 3, Column 4

Table x.x. Caption

Four-columns (with generic CSS-classes applied)

darker headerdarker headerexceptiondarker header
Row 1, Column 1Row 1, Column 2Row 1, Column 3Row 1, Column 4
Row 2, Column 1differentRow 2, Column 3Row 2, Column 4
Row 3, Column 1Row 3, Column 2Row 3, Column 3Row 3, Column 4

Table x.x. Caption

10 
PARAGRAPH PICTURE

How it works

  • Default: None.
  • Options:
    - Left align, no border (.img-left-noborder)
    - Right align, no border (.img-right-noborder)
    - Left align, border (.img-left-border)
    - Right align, border (.img-right-border)
  • Method: Select one the listed CSS-classes.

Examples

Left aligned - No Border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Right aligned - No Border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Left aligned - Border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Right aligned - Border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sidebar

Footer