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