Kitchen Sink: Every Blog Content Element

Text set with a heading

This post exists to test every element the blog can render. It includes bold text, italic text, bold italic text, an internal link and an external link that opens in a new tab.

Heading level two

A paragraph directly after a level two heading. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading level three

A paragraph directly after a level three heading. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Unordered list

  • A short list item

  • A list item with bold, italic and a link

  • A longer list item that wraps onto multiple lines to check the hanging indent. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • A nested list item

    • Another nested list item

  • A final list item

Ordered list

  1. First step

  2. Second step, which is long enough to wrap onto a second line so the number alignment can be checked against the wrapped text.

    1. Nested step one

    2. Nested step two

  3. Third step

Blockquote

Design is not just what it looks like and feels like. Design is how it works. This quote is long enough to wrap across a couple of lines.

Inline image

An image inserted directly into the rich text editor:

Table

A table with a header row and cells of varying length:

Factor

Consumer product

Enterprise product

User volume

High (millions)

Low to moderate (thousands)

Decision reversibility

High

Low (training, change management)

User diversity

Relatively homogeneous

Multiple roles, permissions, workflows and a long cell that wraps across several lines

Bold cell

Italic cell

Linked cell

Wide table

A table with enough columns to scroll horizontally on small screens:

Column one

Column two

Column three

Column four

Column five

Column six

Value

Value

Value

Value

Value

Value

Value

Value

Value

Value

Value

Value

Long unbroken string

https://studiovigo.co.uk/insights/a-very-long-url-without-any-spaces-to-check-that-it-wraps-instead-of-overflowing-the-container

A text set without a heading, followed by image sets containing one, two and three images.

Statistics

Five statistics to test an incomplete row

Covers prefixes, suffixes, decimals and large numbers.

Large number with a suffix
1250+
Decimal percentage
98.5%
Prefix and suffix
£2.4m
Plain number
12
Zero value with a longer label that wraps
0

Feature cards

Four cards to test an incomplete row

Includes a card without an icon and a card with a list.

Card with icon

A short paragraph with bold and a link.

Card with a list

  • First point

  • Second point

  1. First step

  2. Second step

Card without an icon

This card has no icon so the heading sits at the top.

Card with a much longer heading that wraps

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

A second paragraph.