UNESCO
English Français
Help preserve sites now!
Join the 130,591 Members
Login
Paraty and Ilha Grande – Culture and Biodiversity (Brazil)
 

Web Style Guide

The World Heritage Centre 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 Open Sans Light

H2 Heading Open Sans Light

H3 Heading Open Sans Light

H4 Heading Open Sans Light

H5 Heading Open Sans Light
H6 Heading Open Sans Light

Font size

Class .readable to get bigger font size

Class .small to get small font size

.h1 Heading Open Sans Light
.h2 Heading Open Sans Light
.h3 Heading Open Sans Light
.h4 Heading Open Sans Light
.h5 Heading Open Sans Light
.h6 Heading Open Sans Light

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.

Strong

This is a span with .strong class.
This is a normal span with .stronger class.

This is a paragraph with .strong class

This is a paragraph with .stronger class

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

My long quote with a citation inside and more text

—The autor of the quote, and a citation of a book

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
  • a 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

Text Align

class .centered or .text-align-center center text or block

class .text-align-left or .text-align-normal text align left

class .text-align-right text align right

Boxes

class .box to get a simple box.
class="box"

Header

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

class="related" A simple box.

Videos, responsive Youtube embed

Images

.rounded

.w-100

.img-fluid

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

Tables

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 tableaux-compact"
Table with class=" tableaux tableaux-compact"
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 tableaux-compact tableaux-compact-compact"
Table with class=" tableaux tableaux-compact tableaux-compact-compact"
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

Margin and Padding

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom

Where sides is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 5 - (by default) for classes that set the margin or padding to 5px
  • 10 - (by default) for classes that set the margin or padding to 10px
  • 20 - (by default) for classes that set the margin or padding to 20px
  • 40 - (by default) for classes that set the margin or padding to 40px
  • auto - for classes that set the margin to auto

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 %

Equal height grid: ym-equalize

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"
class="content-full content-full-bluedark readable" >
class="content-full-body"
class="content-full content-full-dark content-full-blue-gradient readable" >
class="content-full-body"
class="content-full content-full-grey readable" >
class="content-full-body"
class="content-full content-full-darkgrey 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.
Image description © Copyright

Advanced

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
Display by:
Country

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