Sample Page

This is the sample page where Team Io grow, nurture and style the blocks. You can follow their progress below.
Once the blocks are ready, they get made into design patterns by Andy. Go check them out.
Finally, these design patterns then get used across the pages in the population stage.

First, let’s check out our friends bold, italic, underline and ~~strikethrough~~. ~~All the things~~.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Copy

Small Copy 1

Small Copy 2

Next up, we have links. Links might also be bold or italic or both. (Check that the hover, active, visited and focus states look ok.)

Coloured Links

Click this link for more info

Links are great, but nothing says “click me” like good old buttons:

Button Text!

Alert boxes

This is a danger alert

This is a warning alert

This is an info alert

This is a success alert

And next we have headers, with a paragraph above and under each one to check for margins and paddings. Exciting!

Heading 1 and a link

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 2 and a link

Heading 3 and a link

Heading 4 and a link

Heading 5 and a link

Heading 6 and a link

Normal Paragraph:

And the small class paragraph, often labelled as small copy on the style guides:

And lastly the smallest class we have, small-2. Adorable.

Below is a separator block. It separates things. Bask in its glory.

Below is a spacer block. Honestly:

And now we come to lists, unordered and ordered with sub lists. Everyone likes a good old-fashioned list.

UL

Bullet list item
Bullet list item with a link
- Sub bullet list item
- Sub bullet list item
Bullet list item

OL

Ordered list item
Ordered list item with a link
1. Sub ordered list item
2. Sub ordered list item
Ordered list item

Show / Hide content

click me

hidden content

Tables next, but no chairs:

Messages per Pack	Messages Cost (excl. VAT)	Messages Pack Cost (excl. VAT)
18	£420.0	$69.0
19	£421.11	$69.1
20	£666.666	£666.66

Table header	Table header
Table data	Table cell with a link. We have gone too far.
Table data	Table data
? The cell below should swap out for a tick:	? The cell below should swap out for a cross:
check	cross

Just keeping tabs on these:

There must be some kind of way outta here
Said the joker to the thief
There’s too much confusion
I can’t get no relief

As I was goin’ over the Cork and Kerry Mountains I saw Captain Farrell and his money, he was countin’.

I first produced my pistol and then produced my rapier I said, “Stand and deliver or the devil he may take ya”.

Done a lot of foolish things (Done a lot) That I really didn’t mean (Got a feeling)
I could be a broken man (Here I am, here I am) Here I am baby Signed, sealed, delivered, I’m yours Here I am baby Signed, sealed, delivered, I’m yours, baby

A few rows sprinkled with different widths:

Row

Normal width

Row

Wide width

Row

Full width

Row

Normal width. Rounded and shadow class applied.

Standard Video

Do not play. This will become your nightmare.

Sprout Video

Code

Sometimes used on API pages etc:

h1 {
    font-family: 'flexolight';
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    color: #f9981c;
    text-align: center;
}
    /* Tablet */
    h1 {
        font-size: 25px;
    }
        /* Mobile */
        h1 {
            font-size: 16px;
        }

Latest posts block

Example used within a row with 2 cols to create the full layout

Latest from our blog

About Esendex

Lorem ipsum dolor sit amet, et mei aliquip corpora atomorum, quo mutat falli ea. Pertinacia voluptatibus has et, quem percipitur pri no. Unum scribentur necessitatibus vim eu, mel at nemore lucilius. Quo id semper admodum, nec ne prima audiam numquam, ius sale labore epicuri ea. Ei affert congue partiendo eam, his eu pertinax corrumpit. Nam no doming mnesarchum definitiones, mea cu purto etiam.

Ad clita noster appetere eos. Quo in liber docendi recteque, mea appareat instructior definitionem ex. Debet detracto eam ne. Ea posse doctus accusam pro, in eam augue dissentias ullamcorper. Vim at populo qualisque. Putent fabulas in vim, sea nisl posse vitae ad, quas soluta vocent usu ut.

Sed ea elit principes. Mel ullum doming vituperata at, no mollis urbanitas his. Cu diceret vivendo appareat est, sed iisque eripuit scripserit an, vix dicit voluptatum id. Eripuit signiferumque mediocritatem his eu, tollit putent ne nam. Et dicta timeam sensibus vis. Te suas invidunt eos, his ut sint adhuc.

Usu libris adipisci cu, nam te malorum euripidis. Ut discere legendos vis. Eu aeterno eruditi postulant pri, eius vocibus ei vis. Et atqui mentitum vel, sit accusam fastidii deserunt ei. Duo vide nullam oblique ad.

Mediaburst online manual

Sending SMS campaigns with our straightforward platform is easy, and there is no need to install any software.

More information

Sample Page

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5

Heading 5

Heading 6

Heading 6

Alert boxes

Heading 1 and a link

Heading 2 and a link

Heading 3 and a link

Heading 4 and a link

Heading 5 and a link

Heading 6 and a link

UL

OL

Show / Hide content

click me

Row

Row

Row

Row

Standard Video

Sprout Video

Code

Form

Latest posts block

Latest from our blog

About Esendex