English Français
Aidez maintenant !
CloseX
 Choisir un mot de passe

Vous n'avez pas de mot de passe. Merci d'entrer votre courriel enregistré. Nous allons vous envoyer un courriel afin que vous puissiez choisir votre mot de passe.


Typography

Cette page n'est pas intégralement disponible en français, vous pouvez la consulter en anglais.

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.

class=readable to get bigger font size.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et risus. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.

Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam suscipit placerat odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla nulla.

Maecenas vel metus quis magna pharetra fermentum. Integer sit amet tortor. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.


This is a nested column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is another nested column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Maecenas vel metus quis magna pharetra fermentum. Integer sit amet tortor. Maecenas porttitor, pede sed gravida auctor, nulla augue aliquet elit, at pretium urna orci ut metus. Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl. Phasellus congue neque a lorem.

Table of content
  • Typographic Settings
  • Heading Levels
  • Paragraphs
  • Blockquotes
  • Preformatted Text
  • Inline Semantic Text Decoration
  • Unordered List
  • Ordered List
  • Definition List
  • Text & Images
  • Text & Images with Captions
  • Boxes
  • Buttons
  • Tabs
  • Tables
  • A Simple Sidebar
  • Truly flexible & equal height content boxes

Typography examples with YAML frameworks. Consult YAML examples. For any particular need or to report an error please contact Eric Esquivel. This is tested on Internet Explorer 9,8,7,6, Firefox, Chrome, Opera, Safari on various systems (descktop, phone, ...)

Side box example
  • Africa
  • Arab States
  • Asia and the Pacific
  • Europe and North America
  • Latin America and the Caribbean

Typographic Settings

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 Box

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

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".

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".

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".

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

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

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".

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".

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


Blockquotes

This is a paragraph text within a

element. This is a paragraph text within a
element. This is a paragraph text within a
element. This is a paragraph text within a
element.

Preformatted Text

This is preformatted text, wrapped in a
 element. 
This is preformatted text, wrapped in a
 element.

Inline Semantic Text Decoration

  • an anchor tag () example
  • an italics and emphasize tag (, ) example
  • a big and small tag (, ) example
  • a bold and strong tag (, ) example
  • an acronym and abbreviation tag (, ) example
  • a cite and quote tag (, ) example
  • a code und definition tag (, ) example
  • a teletype und keyboard tag (, ) example
  • a variableandsampletag (, ) example
  • an inserted and deleted tag (, ) example
  • a subscript and superscript tag (, ) example

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
A definition list — this is
element. A definition list — this is
element.
A definition list — this is
A definition list — this is
element. A definition list — this is
element.

Blocks

A simple box. This box is responsive.

A simple box into a box. This box is responsive.

FAQ example
Ext.onReady(function() { var els = Ext.select(".toggleNext"); els.on('click',function(el){ nextP = Ext.get(el.target).next('p'); nextP.setVisibilityMode(Ext.Element.DISPLAY); nextP.toggle({easing:'ease'}); }); });

Box to Highlight Content 

Advertisement, Advertisement, Advertisement, Advertisement, Advertisement, Advertisement, Advertisement, Advertisement, Advertisement, Advertisement, Advertisement,

 

Text & Images

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.


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.


Text & Images with Captions

Fig. 1: Sample caption for this beautiful dummy 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.

Big Box

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.

Tables

table 1: this is a simple table with caption
Table heading
column 1column 2column 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="full"
Table heading
column 1column 2column 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"
Table heading
column 1column 2column 3
subhead 1 dummy content dummy content
subhead 2 dummy content dummy content
subhead 3 dummy content dummy content

 

Truly flexible & equal height content boxes

Have you ever dreamed of flexible content boxes with complete graphical styling ability? Do you wish them to feature equal heights via pure CSS? Do you need them to be available crossbrowser with full support for older versions of the Internet Explorer? So, here they are ...

Simple Usage

This very simple example shows how to use Class .ym-equalize to set up a subtemplate with equal height content boxes.

Topic One
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
Topic Two

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.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.

Without .equalize.

Topic One
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
Topic Two

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. 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.

Advanced Usage

Now a more advanced example. The following three content boxes are fully grahpical styled and they contain a "more" link at the bottom of each box. Check out the markup these links as this is an accessible best-practice-solution.

Topic One
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
→ read more ...
Topic Two

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.

→ read more ...
Topic Three
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
Read more ...

Buttons

Save Next Step

Save Next Step

Tabs

Responsive Tabs

Videos

About this example

This flexible equal heights solution is based on YAML's subtemplates and combines three layout techniques for a crossbrowser working result. The equal height boxes are based on CSS tables (in all modern browsers) and floats (in Internet Explorer 5.x – 7.0). Additionally it uses Alex Robinson's Equal Height technique with all browsers and therefore inherits one of its limits.

Limits of this "equal heights" approach

As Alex Robinson writes in the Appendix J of his «one true layout» article, some browsers have issues when linking to anchors in elements within the containing block (e.g. anchors of skip-links). This problem is fixed in recent versions of Firefox, Opera and Safari and there is a workaround for IE5.x & IE6 – but this can't be fixed in Internet Explorer 7.0 with CSS. Therefore keep that issue in mind (avoid linking into equalized containers) when using equal heights ym-grid.