Mediaburst online manual

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

Sample Page

  1. This is the sample page where Team Io grow, nurture and style the blocks. You can follow their progress below.
  2. Once the blocks are ready, they get made into design patterns by Andy. Go check them out.
  3. 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 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5
Heading 5
Heading 6
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

Click this link for more info

Click this link for more info

Click this link for more info

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

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

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 3 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 4 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 5 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 6 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.

Normal Paragraph:

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.

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.

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

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.

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

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.

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

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

Show / Hide content

click me

hidden content

Tables next, but no chairs:

Messages per PackMessages Cost (excl. VAT)Messages Pack
Cost
(excl. VAT)
18£420.0$69.0
19£421.11$69.1
20£666.666£666.66
Table headerTable header
Table dataTable cell with a link. We have gone too far.
Table dataTable data
? The cell below should swap out for a tick:? The cell below should swap out for a cross:
checkcross

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

Video Thumbnail

Video Thumbnail

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;
        }

Form

Paragraph text part way through the form.

Label

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.