UI HTML-elements

For what this document:

– showcase of WP visual editor possibilities
– for designers – to keep in mind all elements that should be designed
– for frontend developers – to test the implementation of their code with WP visual editor

Contents:

– paragraphs, alignments
– inline text-elements, headers, lists, tables,
– blockquotes, preformatted and other formats/styles (lead text, small text)
– forms
– pagination, buttons and others site elements
– images

 

 

p (paragraphs) and alignments


Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times . Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy.

left alignment: Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. HTML and CSS are our tools.

right alignment: Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentumsdfsd, turpis mi volutpat justo, eu volutpat enim diam eget metus.

center alignment: Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentumsdfsd, turpis mi volutpat justo, eu volutpat enim diam eget metus.

fullwidth text: Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentumsdfsd, turpis mi volutpat justo, eu volutpat enim diam eget metus.

 

 

inline text-elements


Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Maecenas ornare tortor. Underline. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. “Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl” – The New York Times. Donec sed tellus eget sapien fringilla nonummy: C:\\filename.zip. Donec faucibus. Dinner’s at 5:00. Let’s make that 7. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

 

<a href=”url”> link </a>

<strong> This is strong </strong>

<em> Emphasized </em>

<u> Underlined </u>

<del> Deleted text </del>

<ins> Let’s make that 7. </ins>

<code> C:\\filename.zip (inline code) </code>

<cite> The New York Times (reference to author) </cite>

5 <sup> 3 </sup> = 125

H <sub> 2 <sub> O

 

 

Headings


Header1

(used only for page/post titles)

Header2

Header3

Header4

Header5
Header6

 

 

Lists


Unordered List

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

 

 

Tables


 

Table Column1 Column2 Column3
Row1 Item1 Item2 Item3
Row2 Item4 Itme5 Item6

 

 

Blockquote


 

“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”

AuthorName (with a link)

 

Preformatted Text or Code (<pre>)


“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!”

or code

#container { float: left; margin: 0 -240px 0 0; width: 100%; }

the end

 

 

 

 

 

Images

sizes

fullwidth

smaller

with atrributes

text alignments

simple html-gallery

(we could choose number of columns)

 

slider gallery

simple slider

simple carusel

slider-gallery with thumbnail pager

slider-gallery with thumbnail pager as carusel

slider-gallery with responsive video embed (youtube)