Wysiwyg
What is it?
This wysiwyg (what you see is what you get) page contains all elements you could typically find in a wysiwyg including but not limited to Headings, paragraphs, lists, links etc.
Example variations below
Functionality
For Styling you can:
Add a background image, video, or background colour.
Style text, adjust alignments, spacing and container widths.
For Content population you can:
Heading, Paragraph, List, Quote, Classic, Code, Preformatted, PullQuote, Table, Verse.
Heading Demo
Example Headings in the same colour and left aligned.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Example Headings in different colours and right aligned.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph Demo
Left aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Centre aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Right aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
List Demo
Ordered list
- ordered list item one
- ordered list item two
- ordered list item three
Unordered list
- ordered list item one
- ordered list item two
- ordered list item three
Quote Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Classic Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Code Demo
<div>
<h3>This is a code block heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.</p>
</div>Preformatted Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Pullquote Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
The citation
Table Demo
Table with white background colour, black text colour, with table headers, with footers, left aligned text
| Header label | Header label | Header label | Header label |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Footer label | Footer label | Footer label | Footer label |
Table with white background colour, purple text colour, no table headers, with footers, right aligned text
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Footer label | Footer label | Footer label | Footer label |
Table with solid background, table headers, no footers, centre aligned text
| Header Label | Header Label | Header Label | Header Label |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Table with striped background, table headers and footers
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Footer label | Footer label | Footer label | Footer label |
Verse Demo
Verse Left Aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Verse Centre Aligned with background colour and padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.
Verse Right Aligned with bold text and purple text colour
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla tellus sem, at tempus mauris ullamcorper a. Sed in enim eget odio vehicula accumsan sit amet ac tellus. Nulla at eleifend orci. Fusce diam enim, egestas consequat massa et, ultrices eleifend magna. Nullam vestibulum posuere fringilla. Phasellus posuere quam massa, vitae faucibus ipsum elementum et.