COLORS
COLORS - BOOKING STEPS
State:Loading
State:Loaded
Hover to seedemo
HTML
Heading and text
Heading 1
75 characters max for readability lorem ipsum dolor sit ameta consecteturs.
50 characters readability on mobile small loremip.
Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
leo break,
ultricies eget, tempor sit amet, ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
...
“blockquote, This is a quote as left by me.”—Harry Roberts
...
Inline Element
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 variarble element, such as x = y
etc
CKEDITOR - Styles (Admin Text Editor)
Preamble lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
Text after preamble...
...
...
Text before Highlight text after
Text before Text Large text after
Text before Text Small text after
Text before Quotation
text after
Text before Text Color 1 text after
Text before Text Color 2 text after
Text before Text Color 3 text after
...
Left image lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
...
Right image lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.
...
[CKEDITOR Style: Table Skin A, found under TABLE section]
...
[CKEDITOR Style: List Skin A, found under LIST section]
FORM
FORM - BUTTONS
FORM - Text fields
Text fields - State attributes
The difference between disabled and readonly is read-only inputs are still focusable and have interactable text.
FORM - Select menu
FORM - Checkbox
FORM - Radio Button
FORM - HTML5 input
Table
Table - Default
...
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| row two column one | row two column two | row two column three |
| row three column one | row three column two | row three column three |
| row four column one | row four column two | row four column three |
| Row Heading 1 | Row Heading 2 | Row Heading 3 |
| row six column one | row six column two | row six column three |
| row seven column one | row seven column two | row seven column three |
| colspan heading | ||
| row nine column one | row nine column two | row nine column three |
| row ten column one | row ten column two | row ten column three |
...
Table - Responsive
...
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| row two column one | row two column two | row two column three |
| row three column one | row three column two | row three column three |
| row four column one | row four column two | row four column three |
| Row Heading 1 | Row Heading 2 | Row Heading 3 |
| row six column one | row six column two | row six column three |
| row seven column one | row seven column two | row seven column three |
| colspan heading | ||
| row nine column one | row nine column two | row nine column three |
| row ten column one | row ten column two | row ten column three |
...
Table - Skin A
...
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| row two column one | row two column two | row two column three |
| row three column one | row three column two | row three column three |
| row four column one | row four column two | row four column three |
| Row Heading 1 | Row Heading 2 | Row Heading 3 |
| row six column one | row six column two | row six column three |
| row seven column one | row seven column two | row seven column three |
| colspan heading | ||
| row nine column one | row nine column two | row nine column three |
| row ten column one | row ten column two | row ten column three |
...
Table - Responsive, Skin A
...
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| row two column one | row two column two | row two column three |
| row three column one | row three column two | row three column three |
| row four column one | row four column two | row four column three |
| Row Heading 1 | Row Heading 2 | Row Heading 3 |
| row six column one | row six column two | row six column three |
| row seven column one | row seven column two | row seven column three |
| colspan heading | ||
| row nine column one | row nine column two | row nine column three |
| row ten column one | row ten column two | row ten column three |
...
List
List - Unordered
...
- 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
...
List - Description
...
- Defines terms/names
- describes each term/name
- Title here
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris commodo consequat.
...
List - Ordered
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- This is the last list item
...
List - Skin A
- item one
- item two
- item three
- item four
...
Image
Page image / Page icon (Favicon)
App Name: Kulturrejser Europa
Color: #000000 (SVG 'mask-icon')
Background Color: #000000 ('msapplication-TileColor')
Page image - Apple
Page image - Microsoft (browserconfig.xml)
Page image - Android / Chrome (manifest.json)
Page image - Safari: Pinned Tab for Mac OS X (SVG)
Without focus
With focus
Startup Image
Startup Image - Apple
Type icon
LAYOUT
- Screen small: not displayed (.not-layout1)
- Screen small only: displayed (.not-layout2 .not-layout3)
- Screen medium: not displayed (.not-layout2)
- Screen medium only: displayed (.not-layout1 .not-layout3)
- Screen large: not displayed (.not-layout3)
- Screen large only: displayed (.not-layout1 .not-layout2)
