Styles can be used with any semantic markup, eg a list of links:

With icons:

Checkbox *
Radio
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.3s Easing: ease-in-out; (Hover to see effect)

Neutral, backgrounds and text

  • White #FFFFFF
  • Off white: #F1F1EE
  • Paper: #D9D4CA
  • Light gray: #777777
  • Medium gray: #4D4D4D
  • Dark Gray: #232323
  • Links: #095F90
  • Links Alt: #d12d1e
  • Dark Blue: #293745
  • Black: #1A1A1A

Top level section colours

  • Search: Blue: #1676AA
  • Labs: Jade green: #37B98B
  • Pro: Raspberry: #E11D53
  • Research: Purple: #7F3978
  • Project sites: Orange: #d43900

Brand colours

  • Yellow: #FFAE00
  • Red: #F22F24
  • Orange: #d43900
  • Raspberry: #E11D53
  • Jade green: #37B98B
  • Light Blue: #4BC0F0
  • Blue: #1676AA
  • Purple: #7F3978

Body font:

"Open Sans", "Arial", sans-serif;

"Open Sans", "Arial", sans-serif;

"Open Sans", "Arial", sans-serif;

Secondary/Title font:

Ubuntu, Arial, sans-serif;

Ubuntu, Arial, sans-serif;

Ubuntu, Arial, sans-serif;

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens

TODO

  • inline viewbox editing
  • inline preview height adjust
  • inline x and y attributes
  • correct singleton path elements
  •  

SRC

SRC MODIFIED

CSS

Preview

These icons are inline inside the _head super-global pattern and are available at all times
icon-facebook
icon-twitter
icon-pinterest
icon-googleplus
icon-soundcloud
icon-github
icon-instagram
icon-tumblr
icon-delete
icon-next
icon-previous
icon-check
icon-help
icon-tag
icon-menu
icon-linkout
icon-search
icon-settings
General web
  • HOME
Feedback
Cloud/Upload/Download
Flagging
Shopping
Maps & wayfinding
Graphs
Communication
Editing
Arrows
Time
Devices
Media
Playback
Documents, Books and files
Layout
People and users
These icons are inline inside the _head super-global pattern and are available at all times
icon-facebook
icon-twitter
icon-pinterest
icon-googleplus
icon-soundcloud
icon-github
icon-instagram
icon-tumblr
icon-delete
icon-next
icon-previous
icon-check
icon-help
icon-tag
icon-menu
icon-linkout
icon-search
icon-settings
In text

This is a short paragraph of text and here are some different icons in the text flow

GENERATED ICON LIST


link-black-blue

svg-icon-bookmark-before

svg-icon-bookmark-eu-blue

svg-icon-bookmark

svg-icon-bookmark-white-before

svg-icon-bookmark-white

svg-icon-calendar

svg-icon-calendar-white

svg-icon-clock

svg-icon-configuration

svg-icon-download

svg-icon-down

svg-icon-ellipsis-eu-blue

svg-icon-email

svg-icon-external-eu-blue-after

svg-icon-external-eu-blue

svg-icon-external-white-after

svg-icon-eye

svg-icon-form-field-calendar

svg-icon-home

svg-icon-image-grey-lighter

svg-icon-image

svg-icon-info

svg-icon-language

svg-icon-linkout

svg-icon-location

svg-icon-loggedin-user

svg-icon-minus

svg-icon-music-grey-lighter

svg-icon-music

svg-icon-next

svg-icon-notifications

svg-icon-openbook-grey-lighter

svg-icon-openbook

svg-icon-phone-landline

svg-icon-plus

svg-icon-previous

svg-icon-rss

svg-icon-search

svg-icon-tv-grey-lighter

svg-icon-tv

svg-icon-user

svg-icon-user-signin

svg-icon-zoom-in

svg-icon-zoom-out

view edit alert upload exit
Avatar
16x9 Image
4x3 Image
Loading...
Person Name
Square Thumbnail
Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.
[[#extended_info]]
  • [[#is_concept]]Concept[[/is_concept]] [[#is_person]]Person[[/is_person]] [[#is_place]]Place[[/is_place]] [[#directMatch]][[directHitPreMatch]][[.]][[directHitPostMatch]][[/directMatch]] [[^directMatch]] [[#indirectMatch]][[unmatched]] ( [[indirectHitPreMatch]][[.]][[indirectHitPostMatch]][[#indirectLocale]] | [[.]][[/indirectLocale]] )[[/indirectMatch]] [[^indirectMatch]][[directHit]][[/indirectMatch]] [[/directMatch]] [[#life]][[/life]] [[#dateOfBirth]]Born [[.]][[/dateOfBirth]] [[#dateOfDeath]] Died [[.]] [[/dateOfDeath]] [[#life]][[/life]] [[#life_summary]][[.]][[/life_summary]]
  • [[/extended_info]] [[^extended_info]]
  • [[#directMatch]][[directHitPreMatch]][[.]][[directHitPostMatch]][[/directMatch]] [[^directMatch]] [[#indirectMatch]][[unmatched]] ( [[indirectHitPreMatch]][[.]][[indirectHitPostMatch]][[#indirectLocale]] | [[.]][[/indirectLocale]] )[[/indirectMatch]] [[^indirectMatch]][[directHit]][[/indirectMatch]] [[/directMatch]]
  • [[/extended_info]]

    An introductory paragraph for the list:

    1. This is a list item in an ordered list
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. Lists can be nested inside of each other
      1. This is a nested list item
      2. This is another nested list item in an ordered list
    4. This is the last list item

    An introductory paragraph for the list:

    • This is a list item in an unordered list
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • Lists can be nested inside of each other
      • This is a nested list item
      • This is another nested list item in an unordered list
    • This is the last list item

    Responsive Embedded Video (Youtube/Vimeo etc.)

    HTML5 Video

    Test CC Guidelines

    Description

    This is the simplest working setup to get links to pages like linking back to data in the referring document.
    The above link works, but only because of an attribute on the test link below, and other data embedded in this page.

    The Data Needed

    namespaces

    No metadata is needed in the head of the document, but somewhere there has to be an element - like this span - that has the xml namespace attributes:
    • xmlns:cc="http://creativecommons.org/ns#"
    • xmlns:dc="http://purl.org/dc/elements/1.1/"
    • xmlns:xhv="http://www.w3.org/1999/xhtml/vocab#"

    title

    The "Work Details" title label comes from this span: Test Title which has the attribute
    • property="http://purl.org/dc/elements/1.1/title dc:title"

    attribution

    It is the link to the work's origin that generates the content of the "cite" box. These attributes are necessary on the <a> element:
    • property="cc:attributionName"
    • rel="cc:attributionURL"
    • href="the edm isShownAt"

    a guidelines referencing element

    An element - like this span - has to be present, with attributes referencing the guidelines document:
    • rel="cc:useGuidelines"
    • resource="http://www.europeana.eu/rights/pd-usage-guide/"
    This becomes the href of the "Non-binding use guidelines apply to this work" text.

    license rel (url)

    The actual link to the rights page should have a rel attribute:
    • rel="xhv:license http://www.europeana.eu/schemas/edm/rights"
    Nothing works without xhv:license.

    Test

    warning

    Keep an eye on the net tab when you open the link - it can time-out contacting scraper.creativecommons.org.

    link

    Here's a working test link to a rights page. If this is being read from a publicly available server then the above link will contain the text "Non-binding use guidelines apply to this work." and other data scraped from this page.

    other

    Other metadata used in the old portal included:
    • rdfs:seeAlso
    • cc:morePermissions
    • TODO: find them all
    but that is not used here.
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
    Row Heading 1 Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
    Row Heading 2 Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
    Row Heading 3 Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
    Row Heading 4 Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
    Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    A caption can be applied to an image, quote, form field, etc.

    Here is some text
    
    	function foo($arg_1, $arg_2, /* ..., */ $arg_n)
    	{
    	    echo "Example function.\n";
    	    return $retval;
    	}
    
    

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    This is what error text looks like

    This is what valid text looks like

    This is what warning text looks like

    This is what information text looks like.

    Heading Level 1

    Heading Level 2

    Heading Level 3

    Heading Level 4

    Heading Level 5
    Heading Level 6

    h1 Heading Giga

    h1 Heading Mega

    h1 Heading Alpha

    Heading Beta

    Heading Gamma

    Heading Delta

    Heading Epsilon
    Heading Zeta

    Heading 1 with link

    Heading 2 with link

    Heading 3 with link

    Heading 4 with link

    Heading 5 with link
    Heading 6 with link

    Heading Level 1

    Heading Level 2

    Heading Level 3

    Heading Level 4

    Heading Level 5
    Heading Level 6

    This is a text link

    Strong is used to indicate strong importance

    This text has added emphasis

    The b element is stylistically different text from normal text, without any special importance

    The i element is text that is set off from the normal text

    The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

    This text is deleted and This text is inserted

    This text has a strikethrough

    Superscript®

    Subscript for things like H2O

    This small text is small for for fine print, etc.

    Abbreviation: HTML

    Keybord input: Cmd

    This text is a short inline quotation

    This is a citation

    The dfn element indicates a definition.

    The mark element indicates a highlight

    This is what inline code looks like.

    This is sample output from a computer program

    The variable element, such as x = y

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

      	
    P R E F O R M A T T E D T E X T
    ! " # $ % & ' ( ) * + , - . /
    0 1 2 3 4 5 6 7 8 9 : ; < = > ?
    @ A B C D E F G H I J K L M N O
    P Q R S T U V W X Y Z [ \ ] ^ _
    ` a b c d e f g h i j k l m n o
    p q r s t u v w x y z { | } ~ 
    

    Text looks better

    When it's 3D text

    This is the text
    This is the tooltip
    This is the text
    This is the tooltip
    This is the text
    This is the tooltip

    Welcome Cecile, let's ingest a world of Culture!

    Fullscreen Desktop Application

    My web page with desktop fullscreen feature

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    10:00 — 22:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    Lorem ipsum dolor sit (37 characters)

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental.

    Organisation | Institute Name
    Job Title
    Europeana Foundation Board Position

    Lorem ipsum dolor sit amet, consectetur adipisicing elit

    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    "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."
    Number of statistics that are false:
    95%
    Increase of 35%
    Decrease of 35%
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
    • Tab Item

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus pharetra tincidunt elit ullamcorper. Sed ac mauris ipsum. Nullam imperdiet sapien id purus pretium id aliquam mi ullamcorper.

    • Another Tab

      Ut laoreet augue et neque pretium non sagittis nibh pulvinar. Etiam ornare tincidunt orci quis ultrices. Pellentesque ac sapien ac purus gravida ullamcorper. Duis rhoncus sodales lacus, vitae adipiscing tellus pharetra sed. Praesent bibendum lacus quis metus condimentum ac accumsan orci vulputate. Aenean fringilla massa vitae metus facilisis congue. Morbi placerat eros ac sapien semper pulvinar. Vestibulum facilisis, ligula a molestie venenatis, metus justo ullamcorper ipsum, congue aliquet dolor tortor eu neque. Sed imperdiet, nibh ut vestibulum tempor, nibh dui volutpat lacus, vel gravida magna justo sit amet quam. Quisque tincidunt ligula at nisl imperdiet sagittis. Morbi rutrum tempor arcu, non ultrices sem semper a. Aliquam quis sem mi.

    • Third

      Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in, porttitor ut sapien. Phasellus tempor lorem id justo ornare tincidunt. Nulla faucibus, purus eu placerat fermentum, velit mi iaculis nunc, bibendum tincidunt ipsum justo eu mauris. Nulla facilisi. Vestibulum vel lectus ac purus tempus suscipit nec sit amet eros. Nullam fringilla, enim eu lobortis dapibus, quam magna tincidunt nibh, sit amet imperdiet dolor justo congue turpis.

    • Last Item

      Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus dui urna.

    • Accordion 1
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa maxime odit reiciendis nostrum animi amet! Commodi impedit adipisci, accusamus aut consequatur architecto aliquid minima fuga id, necessitatibus, mollitia maxime vel!
    • Accordion 2
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa maxime odit reiciendis nostrum animi amet! Commodi impedit adipisci, accusamus aut consequatur architecto aliquid minima fuga id, necessitatibus, mollitia maxime vel!
    • Accordion 3
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa maxime odit reiciendis nostrum animi amet! Commodi impedit adipisci, accusamus aut consequatur architecto aliquid minima fuga id, necessitatibus, mollitia maxime vel!
    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.
    [[#transcript]]

    [[#words]] [[txt]] [[#space-after]]
    [[/space-after]] [[/words]]

    [[/transcript]]
    << >>
    Gallery of American presidents
    Channel
    Current View
    Current View
    Current View
        page: /

    Hold Ctrl to multi-select

    10:00 — 22:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Firsty Surnameson
    Contact:
    Firsty Surnameson
    01234 5678910
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

    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.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit

    [[#title]]
    [[#url]][[/url]][[.]][[#url]][[/url]]
    [[#icon]] [[/icon]]
    [[#tags]] [[/tags]]
    [[/title]] [[#excerpt]] [[#short]]
    [[& . ]]
    [[/short]] [[/excerpt]]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    [[^ img.src ]]
    [[>molecules/components/search/_search-listitem-icon-js]]
    [[/ img.src ]]

    [[ title ]] [[#year.long]]([[ year.long ]])[[/year.long]][[#agent]] | [[ agent ]][[/agent]]

    [[#agent]]

    [[ . ]]

    [[/agent]] [[#text]]

    [[text.medium]]

    [[/text]] [[#concepts]]
      [[#items]]
    • [[text]]
    • [[/items]]
    [[/concepts]] [[#origin]] [[#url]] [[/url]] [[/origin]]
    [[# menus.actions_disabled ]] [[/ menus.actions_disabled ]]
    [[#agent]][[.]][[/agent]][[^agent]]
    [[/agent]]
    stars
    My Checkbox list title

    Sign up for our newsletter

    [[#license_CC0]] [[/license_CC0]] [[#license_CC_BY]] [[/license_CC_BY]] [[#license_CC_BY_SA]] [[/license_CC_BY_SA]] [[#license_CC_BY_ND]] [[/license_CC_BY_ND]] [[#license_CC_BY_NC]] [[/license_CC_BY_NC]] [[#license_CC_BY_NC_SA]] [[/license_CC_BY_NC_SA]] [[#license_CC_BY_NC_ND]] [[/license_CC_BY_NC_ND]] [[#license_OOC]] [[/license_OOC]] [[#license_PD_NC]] [[/license_PD_NC]] [[#license_public]] [[/license_public]] [[#license_RR_free]] [[/license_RR_free]] [[#license_RR_paid]] [[/license_RR_paid]] [[#license_RR_restricted]] [[/license_RR_restricted]] [[#license_unknown]] [[/license_unknown]] [[#license_orphan]] [[/license_orphan]] [[#license_RS_NOC_NC]] [[/license_RS_NOC_NC]] [[#license_RS_NOC_OKLR]] [[/license_RS_NOC_OKLR]] [[#license_RS_INC_EDU]] [[/license_RS_INC_EDU]] [[#license_RS_INC]] [[/license_RS_INC]] [[#license_RS_INC_OW_EU]] [[/license_RS_INC_OW_EU]] [[#license_RS_CNE]] [[/license_RS_CNE]]
    [[#license_CC0]] [[license_name]] [[^license_name]] CC0 [[/license_name]] [[/license_CC0]] [[#license_CC_BY]] [[license_name]] [[^license_name]] CC BY [[/license_name]] [[/license_CC_BY]] [[#license_CC_BY_SA]] [[license_name]] [[^license_name]] CC BY-SA [[/license_name]] [[/license_CC_BY_SA]] [[#license_CC_BY_ND]] [[license_name]] [[^license_name]] CC BY-ND [[/license_name]] [[/license_CC_BY_ND]] [[#license_CC_BY_NC]] [[license_name]] [[^license_name]] CC BY-NC [[/license_name]] [[/license_CC_BY_NC]] [[#license_CC_BY_NC_SA]] [[license_name]] [[^license_name]] CC BY-NC-SA[[/license_name]] [[/license_CC_BY_NC_SA]] [[#license_CC_BY_NC_ND]] [[license_name]] [[^license_name]] CC BY-NC-ND[[/license_name]] [[/license_CC_BY_NC_ND]] [[#license_OOC]] [[license_name]] [[^license_name]] Out of Copyright [[/license_name]] [[ expiry ]] [[/license_OOC]] [[#license_PD_NC]] [[license_name]] [[^license_name]] Public Domain - non commercial re-use[[/license_name]] [[/license_PD_NC]] [[#license_public]] [[license_name]] [[^license_name]] Public Domain [[/license_name]] [[/license_public]] [[#license_RR_free]] [[license_name]] [[^license_name]] Rights Reserved - Free Access [[/license_name]] [[/license_RR_free]] [[#license_RR_paid]] [[license_name]] [[^license_name]] Rights Reserved - Paid Access [[/license_name]] [[/license_RR_paid]] [[#license_RR_restricted]] [[license_name]] [[^license_name]] Rights Reserved - Restricted Access [[/license_name]] [[/license_RR_restricted]] [[#license_unknown]] [[license_name]] [[^license_name]] Unknown copyright status [[/license_name]] [[/license_unknown]] [[#license_orphan]] [[license_name]] [[^license_name]] Orphan work [[/license_name]] [[/license_orphan]]
    rel="xhv:license http://www.europeana.eu/schemas/edm/rights"

    The grid below shows a combination of nested, gutterless, reversed, centered, responsive grids, all using classes in the HTML. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. Grid 5.3 represents the third nested grid inside of the fifth major grid.

    This is based on CSS Wizardry Grids: See link for docs or the scss file for documentation

    Grid 1.1

    Grid 1.3

    Grid 2.1

    Grid 2.2

    Grid 2.3

    Grid 2.4

    Grid 2.5

    Grid 3.0

    Grid 4.1

    Grid 4.2

    Grid 5.1

    Grid 5.2

    Grid 5.3

    Grid 5.4

    Grid 6.1

    Grid 6.2

    Grid 6.3

    Grid 6.4

    Narrow gutters

    Wide Gutters

    Centered Grid

    4x3 Image
    This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
    (left) Two people, Vermeer, Rijksmuseum, CC BY-SA | (right) Three people, Vermeer, Rijksmuseum, CC BY-SA
    Download
    By:
    10 February 2013
    Deadline for applications: 10 February 2013
    Den Haag, Netherlands

    Provider's Name

    20 mins to read
    10 February 2013 to: 10 February 2013
    +1.888.123.4567
    +1.888.123.4567
    Company Name
    1234 Main St.
    Anywhere, 101010, CA
    U.S.A
    +1.888.123.4567

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    Quote Source
    • Item Type

      Lorem ipsum dolor sit (37 characters)

    • Language Coverage

      Lorem ipsum dolor sit (37 characters)

    • Subjects

      Lorem ipsum dolor sit (37 characters)

    • Spacial Coverage

      Lorem ipsum dolor sit (37 characters)

    • Country

      Lorem ipsum dolor sit (37 characters)

    • Time Coverage

      Lorem ipsum dolor sit (37 characters)

    This is the heading group's main heading

    This is the heading group's subheading

    The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

    A pull quote is a quotation or excerpt from an article

    article

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    A caption can be applied to an image, quote, form field, etc.

    16x9 Image

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed incididsunt ut labore (100 characters)

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

    An introductory paragraph for the list:

    • This is a list item in an unordered list
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • Lists can be nested inside of each other
      • This is a nested list item
      • This is another nested list item in an unordered list
    • This is the last list item

    An introductory paragraph for the list:

    1. This is a list item in an ordered list
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. Lists can be nested inside of each other
      1. This is a nested list item
      2. This is another nested list item in an ordered list
    4. This is the last list item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

    A pull quote is a quotation or excerpt from an article

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    A caption can be applied to an image, quote, form field, etc.

    16x9 Image

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed incididsunt ut labore (100 characters)

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

    An introductory paragraph for the list:

    • This is a list item in an unordered list
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • Lists can be nested inside of each other
      • This is a nested list item
      • This is another nested list item in an unordered list
    • This is the last list item

    An introductory paragraph for the list:

    1. This is a list item in an ordered list
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. Lists can be nested inside of each other
      1. This is a nested list item
      2. This is another nested list item in an ordered list
    4. This is the last list item

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

    A pull quote is a quotation or excerpt from an article

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)
    • Item Type

      Lorem ipsum dolor sit (37 characters)

    • Language Coverage

      Lorem ipsum dolor sit (37 characters)

    • Subjects

      Lorem ipsum dolor sit (37 characters)

    • Spacial Coverage

      Lorem ipsum dolor sit (37 characters)

    • Country

      Lorem ipsum dolor sit (37 characters)

    • Time Coverage

      Lorem ipsum dolor sit (37 characters)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    A caption can be applied to an image, quote, form field, etc.

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

    A pull quote is a quotation or excerpt from an article

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus.

    [[#data_quality]] [[.]] [[/data_quality]]
    [[#dataset_form]]
    [[#dataset_fields]] [[^view_mode.create]] [[#dataset_name]]
    [[/dataset_name]] [[/view_mode.create]] [[#provider]]
    [[/provider]] [[#data_provider]]
    [[/data_provider]] [[#view_mode.create]] [[#user_role.europeana]] [[#dea_signed]]
    [[/dea_signed]] [[/user_role.europeana]] [[/view_mode.create]] [[^view_mode.create]] [[#dea_signed]]
    [[/dea_signed]] [[/view_mode.create]] [[^view_mode.create]] [[#date_created]]
    [[/date_created]] [[#date_updated]]
    [[/date_updated]] [[/view_mode.create]] [[#replaced_by]]
    [[/replaced_by]] [[#description]]
    [[/description]] [[#user_role.europeana]] [[#notes]]
    [[/notes]] [[/user_role.europeana]] [[^view_mode.create]] [[#first_published]]
    [[/first_published]] [[#last_published]]
    [[/last_published]] [[/view_mode.create]] [[^view_mode.create]] [[#assigned_to]]
    [[/assigned_to]] [[/view_mode.create]] [[#countries]]
    [[/countries]] [[#language]]
    [[/language]] [[#harvest_protocol]]
    [[#options]]
    [[/options]]
    [[#options]] [[#protocol_controlled_list]]
    [[/protocol_controlled_list]] [[/options]] [[/harvest_protocol]] [[#harvest_url]]
    [[/harvest_url]] [[#setspec]]
    [[/setspec]] [[#metadata_format]]
    [[/metadata_format]] [[#metadata_schema]]
    [[/metadata_schema]]
    [[/dataset_fields]]
    [[/dataset_form]]
    [[#dataset_preview]] [[.]] [[/dataset_preview]]
    [[#dataset_processing]] [[.]] [[/dataset_processing]]
    [[#modification]] [[#title]][[.]][[/title]] [[#action]][[.]][[/action]] [[#date]][[.]][[/date]] [[/modification]]
    [[#pandora]] [[.]] [[/pandora]]
     
    Tab One (accordion-tabs Overview)

    These tabs become an accordion when there is not enough width for the tab headers to fit on a single row.

    (resize your browser window to see this work)

    Clicking an open tab-header will close it when in accordion mode.

    Click the next tab to learn more.
    Tab Two the Second (II) (the data model)

    The tab content can be supplied with a tab_content entry in the model. A search_result model can also be supplied. Other data structures can be added to the template as needed.

    Click the next tab to learn more.
    Tab Three (a layout limitation)

    The tab content has an absolute position and so instances of this component may need to explicitly set the height to stop content subsequent to the accordion-tabs disappearing beneath it.

    Click the next tab to learn more
    Tab 4 (event callback)

    When the user changes the active tab the (optional) function fnOpenTab (passed in the ops parameter of the init function) will be called - the active tab index is passed into this function as its only parameter.

    (in this example text is written to the document body)

    Lorem ipsum dolor sit (37 characters)

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    About this image

    Skip to page contents
    Skip to page contents
    Skip to page contents

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    [[ title ]] [[#info]] [[/info]]

    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Main info CTA

    • Get in contact with over 1000 members from the cultural sector
    • Take part in our regular meetings and events
    • Get Involved in the future of Open data
    Sign up Now

    Quick Links

    Title here

    Title here

    • Total Visits in 2014
      17,060,879
    • Total Visits in 2015
      20,060,879
    • Total Visits in 2012
      11,060,879
      Increase of 35%
    • Total Visits in 2011
      1,060,879
    • Total Visits in 2011
      1,060,879
      Decrease of 25%
    • Total Visits in 2011
      1,060,879
    [[#state_1_label]][[.]][[/state_1_label]]
    [[i18n.global.actions.previous]] [[i18n.global.actions.next]]
    [[#state_1_title]]
    [[#url]] [[state_1_title]] [[/url]] [[^url]] [[state_1_title]] [[/url]]
    [[/state_1_title]]
    [[#state_2_body]]
    [[#url]] [[& state_2_body]] [[/url]] [[^url]] [[state_2_body]] [[/url]]
    [[/state_2_body]]
    [[#url]] [[/url]]
    previous next
    Lorem ipsum dolor sit amet, consectetur adipiscing elit

    This page should pull in the header and footer markup but they should look unstyled.

    This text should be big and GREEN rather than red, if it is, it's being styled from a pattern lab independent site specific css file, yay.

    Europeana Foundation
    Prins Willem-Alexanderhof 5
    2595 BE Den Haag
    Netherlands

    Our mission

    We transform the world with culture! We want to build on Europe’s rich heritage and make it easier for people to use, whether for work, for learning or just for fun.