English Français

Web Style Guide

The World Heritage Center Website mainly use YAML css Framework. The website strucutre is based on a flexible and responsive grid. It support old Internet Explorer versions, and it is tested with IE7 and Higher.

Typography

Heading Levels

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text.

Messages

This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed".

class="help" This is a paragraph text with class="info". This is a paragraph text with class="info". This is a paragraph text with class="info". This is a paragraph text with class="info". This is a paragraph text with class="info".

class="success" This is a div text with class="success". This is a div text with class="success". This is a div text with class="note". This is a div text with class="success". This is a div text with class="success".

class="alert" This is a div text with class="alert". This is a div text with class="alert". This is a div text with class="alert". This is a div text with class="alert". This is a div text with class="alert".

class="error" This is a paragraph text with class="warning". This is a paragraph text with class="warning". This is a paragraph text with class="warning". This is a paragraph text with class="warning". This is a paragraph text with class="warning".

Blockquotes

This is a paragraph element within a blockquote element. This is a paragraph element within a blockquote element. This is a paragraph element within a blockquote element. This is a paragraph element within a blockquote element. This is a paragraph element within a blockquote element. This is a paragraph element within a blockquote element. This is a paragraph element within a blockquote element.

This is a blockquote element within 1 blockquote
This is a blockquote element within 2 blockquotes
This is a blockquote element within 3 blockquotes

Preformatted Text

This is preformatted text elements

Inline Text

  • anchor
  • italics and emphasize
  • big and small
  • bold and strong
  • acronym
  • abbreviation 
  • cite
  • quote
  • code
  • definition 
  • teletype and keyboard
  • variable andsample 
  • inserted 
  • deleted 
  • a subscript
  • superscript 
  • class="alert"
  • class="help"
  • class="error"
  • class="success"
  • class="box-span"

Lists

Unordered List

  • one part
  • two part
    • one sub part
    • two sub part
    • thre sub part
    • four sub part
  • thre part
  • four part

Ordered List

  1. First part
    1. First sub part
      1. First sub sub part
      2. Second sub sub part
    2. Second sub part
    3. Third sub part
    4. Fourth sub part
  2. Second part
  3. Third part
  4. Fourth part

Definition List

A definition list dt level 1
A definition list dd level 1
A definition list dt level 2
A definition list dd level 2
A definition list dt level 2
A definition list dd level 2
A definition list dt level 3
A definition list dd level 3
A definition list dt level 2
A definition list dd level 2

Various

class = readable to get bigger font size.
class = center center text or block

Boxes

class="box" A simple box.

Header

class="box" > class="box-header" A simple box.

Videos

Images

class="floatbox" > img class="float_right bordered" 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. 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.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

class="floatbox" > img class="float_left 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. 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.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Captions

Fig. 1: Sample caption for this image.

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.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Fig. 2: For captions that are longer than one line, you have
to define a width for the icaption classes in your
content.css or include line-breaks (
) manually.

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.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Tables

Table with no class

table 1: this is a simple table with caption
Table
column 1 column 2 column 3
subhead 1 dummy content dummy content
subhead 2 dummy content dummy content
subhead 3 dummy content dummy content

Table full width

table 2: this is a table with class="full"
Table with class="full"
column 1 column 2 column 3
subhead 1 dummy content dummy content
subhead 2 dummy content dummy content
subhead 3 dummy content dummy content

Table with class

table 2: this is a table with class="tableaux"
Table with class=" tableaux"
column 1 column 2 column 3
subhead 1 dummy content dummy content
subhead 2 dummy content dummy content
subhead 3 dummy content dummy content
table 2: this is a table with class=" tableaux-compact grey "
Table with class=" tableaux-compact grey "
column 1 column 2 column 3
subhead 1 dummy content dummy content
subhead 2 dummy content dummy content
subhead 3 dummy content dummy content
table 2: this is a table with class=" tableaux-compact grey noborder "
Table with class="tableaux-compact grey noborder"
column 1 column 2 column 3
subhead 1 dummy content dummy content
subhead 2 dummy content dummy content
subhead 3 dummy content dummy content

Buttons

Save Next

Save Next

Save Next

Save Next

Save Next

Save Next

Tabs

  • English
  • French
Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom. Simple Box with tabs on top and bottom.
  • Anglais
  • Français
  • Arabe
  • Chinois
  • Russe
  • Espagnol

Illustrations

/graphics/Smallicons-1.0/
/graphics/Smallicons-1.1
/graphics/Smallicons-smashing/
 

Icons

Famfamfam icons
       

Layout

Grids

20 %
20 %
20 %
20 %
20 %
25 %
25 %
25 %
25 %
33.333 %
33.333 %
33.333 %
50 %
50 %
Full Width
20 %
80 %
25 %
75 %
33.333 %
66.666 %
Golden Ratio (1 : 1.618) 38.2%
Golden Ratio (1 : 1.618) 61.8%
40 %
60 %
50 %
50 %
60 %
40 %
Golden Ratio (1.618 : 1) 61.8%
Golden Ratio (1.618 : 1) 38.2%
66.666 %
33.333 %
75 %
25 %
80 %
20 %

Sections

class="content-full content-full-bluelight readable" >
class="content-full-body"
class="content-full content-full-dark content-full-blue readable" >
class="content-full-body"

Title

class="content-full readable" >
class="content-full-body" >
class="content-full-headingbox"
margin: -20px -20px 0 -20px

© copyright / author / description

Blocks

A big image with a text. The image should be attractive, the text not to long with a heading style. This big box is responsive, the text could be display on right or left, and on smaller screen could be on top or bottom.

Results

  • Result
  • Views
1031
properties
31
Transboundary
2
Delisted
48
In Danger
802
Cultural
197
Natural
32
Mixed
163
States Parties
List view List view
Table view Table view

Responsive

Responsive grid

.linearize-level-1
.linearize-level-2

Hide

.linearize-level-1-none
.linearize-level-2-none

Block

 .linearize-level-1-block
 .linearize-level-2-block

Inline

.linearize-level-1-inline 
.linearize-level-2-inline