British Design
Hand-Crafted
Worldwide Delivery

FREE Worldwide shipping - Hurry Limited Time Only


Grid Examples with Backgrounds

I've added the "show-grid" class so that each of the grid sections are highlighted when you hover on them.

12 - Full Width

Sample text...

6 x 6 - Half Width

Sample text...
Sample text...

4 x 4 x 4 - Thirds

Sample text...
Sample text...
Sample text...

3 x 3 x 3 x 3 - Quaters

Sample text...
Sample text...
Sample text...
Sample text...

4 x 8 - Mixed

Sample text...
Sample text...

8 x 4 - Mixed Reverse

Sample text...
Sample text...

Daves Mixed Up Example

Sample text...
Sample text...
Sample text...
Sample text...
Sample text...



Grid Examples without Backgrounds

These are the same grids as above, but without the highliting when hovered. Use these for your website.

12 - Full Width

Sample text...

6 x 6 - Half Width

Sample text...
Sample text...

4 x 4 x 4 - Thirds

Sample text...
Sample text...
Sample text...

3 x 3 x 3 x 3 - Quaters

Sample text...
Sample text...
Sample text...
Sample text...

4 x 8 - Mixed

Sample text...
Sample text...

8 x 4 - Mixed Reverse

Sample text...
Sample text...



Grid Examples With Content

This is an example of the grids in use with text. The format below is using 4 x 8

My block title 1

Praesent viverra blandit tincidunt. Nulla eu justo vel eros euismod rhoncus non et turpis. Praesent varius nunc non aliquet imperdiet. Quisque a lacinia arcu. Ut pulvinar lacinia ligula. Vivamus elementum varius pharetra. Vestibulum fermentum fermentum justo vitae venenatis. Etiam nec neque quam. Quisque pretium orci in ligula tempor, et placerat libero viverra.

My block title 2

Praesent viverra blandit tincidunt. Nulla eu justo vel eros euismod rhoncus non et turpis. Praesent varius nunc non aliquet imperdiet. Quisque a lacinia arcu. Ut pulvinar lacinia ligula. Vivamus elementum varius pharetra. Vestibulum fermentum fermentum justo vitae venenatis. Etiam nec neque quam. Quisque pretium orci in ligula tempor, et placerat libero viverra.

My block title 3

Integer pulvinar aliquet nisl. Nulla velit sem, eleifend a nisi non, facilisis auctor ante. Suspendisse potenti. Cras lobortis mauris porta nibh pulvinar consectetur. Duis ut molestie leo. Aenean malesuada vestibulum interdum. Donec in luctus nibh, lobortis auctor libero. Nullam vel mi non dolor consectetur facilisis. Fusce pellentesque nulla id quam sodales, a ultricies lectus venenatis. Vivamus molestie sagittis nunc et dapibus. Aliquam velit augue, semper gravida egestas ut, laoreet ac lacus. Nulla venenatis neque sit amet fermentum congue. Curabitur elementum tellus vitae sagittis sollicitudin.

My block title 4

Nullam ullamcorper, eros vel imperdiet volutpat, ipsum dolor iaculis libero, id blandit massa turpis a tellus. Aenean in viverra nunc. Maecenas vitae vehicula quam, et tristique velit. Quisque sed eros pellentesque, commodo justo a, accumsan mi. Maecenas fringilla quam eget neque convallis, id fermentum magna lacinia. Nunc ut lacus elit. Aliquam fermentum, erat non ornare rhoncus, erat est interdum est, sit amet mattis lectus sem et lorem. Curabitur feugiat sem a laoreet rhoncus. Proin egestas egestas eros. Cras laoreet leo dapibus lacus rhoncus, at mattis leo dictum. Vivamus id mauris mauris. Aliquam tincidunt tempus augue, at sagittis arcu condimentum eu. Suspendisse a volutpat odio. Nunc ut ante dapibus, laoreet neque vitae, aliquet velit. Phasellus sit amet velit eu quam fermentum viverra.




Also...

Ultimo comes with numerous other styel classes and features, here are a few examples:

Icons

A Star icon

My description

A promotion icon

My description

A globe icon

My description

A delivery icon

My description

Large Icons

A large star icon

My description

A large menu icon

My description

A large painbrush icon

My description

A large responsive icon

My description

Shapes for Icons

You can also make different shape icons

My description

My description

My description

And change their colours if you wanted to using a little CSS:

My description

Social Icons

Ultimo also has the social icons built in too:




Mixing it up a little

Without looking at the html, can you guess what's happening here?

My description

Title

This is sample text

Another paragraph

My description

Title

This is sample text

Another paragraph

My description

Title

This is sample text

Another paragraph

My description

Title

This is sample text

Another paragraph