Paragraphs

Create a paragraph by using the p element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headings

Use the <h1> to <h6> elements to define your headings.

Add the .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 or .uk-h6 class to alter the size of your headings, for example have a h1 look like a h3. For additional styling options, take a look at the Heading component.

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

Text-level semantics

Text-level semantics
The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.
Element Description
<abbr> Define an abbreviation using the abbr element with a title.
<b> Create bold text with the b element.
<cite> Define the title of a work with the cite element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<dfn> Create a definition term using the dfn element with a title.
<em> Emphasize text using the em element.
<i> Set off part of a text by using the i element.
<ins> Mark document changes as inserted text using the ins element.
<kbd> Use a keybord input element to display input in the browser's default monospace font.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using a q element inside a q element.
<s> Define text with a strikethrough using the s element.
<samp> Define sample output with a samp element.
<small> De-emphasize text for small print using the small element.
<span> Define an inline-container using the span element.
<strong> Imply extra importance using the strong element.
<sub> Define subscript text using the sub element..
<sup> Define superscript text using the sup element.
<u> Define underlined text using the u element.
<var> Define a variable using the var element.

Blockquote

To quote multiple lines of content from another source within your document, use the blockquote element.

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Description list

Create a description list using the dl element. Use dt to define the term and dd for the description. For additional styling options, take a look at the Description List component.
Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.

list

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item. For additional styling options, take a look at the List component
  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
  • Item 3
  • Item 4

Preformatted text

For multiple lines of code, use the <pre> element. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.
// Code example
<div id="myid" class="myclass" hidden>
    Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.
</div>

© 2019 Sasuke. All Rights Reserved.