Ketty Store

Heading

h1 heading (36px)

h2 heading (30px)

h3 heading (24px)

h4 heading (18px)

h5 heading (14px)
h6 heading (12px)

Small

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

Mark

Highlight Text

Use the mark element to highlight text.

abbr

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

blockquote

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Dl

Description Lists

The dl element indicates a description list:

Coffee
- black hot drink
Milk
- white cold drink
Coffee
- black hot drink
Milk
- white cold drink

Contextual Colors and Backgrounds

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors":

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

code

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.

kbd

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

pre

Multiple Code Lines

For multiple lines of code, use the pre element:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
Text in a pre element
  is displayed in a fixed-width
  font, and it preserves
  both      spaces and
  line breaks.

If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:

Text in a pre element
  is displayed in a fixed-width
  font, and it preserves
  both      spaces and
  line breaks.