Page Assets

Build pages quickly with our page assets

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

Page Assets:

Page Assets are a constantly growing set of pre-built HTML elements made to work with your style. You can use these to easily build custom static pages on your website, our entire documentation section is built on them!

To get started you need to include our xb_pageassets.less template and wrap any html in our div. Like so: 

<xf:css src="xb_pageassets.less" />
<div class="xb-assets">
html here
</div>

Below you'll find the HTML elements, simply inspect them with your browser and copy the HTML into the div above.






Basic Grid

One full

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed. Sed metus dui, rutrum vel metus quis, tincidunt ullamcorper magna. Duis eu urna id leo ultricies tincidunt lacinia vel mauris. Etiam rutrum sagittis nisi at feugiat. Integer volutpat metus nec condimentum euismod. Phasellus tempus metus vel massa iaculis, sit amet elementum risus vestibulum. Sed vitae dolor semper, tristique ante at, hendrerit ipsum. Sed nec libero a ipsum consectetur laoreet id quis sapien. Morbi ultricies mattis est, at congue dui bibendum eget.

One half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One sixth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One sixth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One sixth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One sixth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One sixth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

One sixth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis elit ante, ac fermentum eros rhoncus sed.

1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12

Sidebar and main content

1/6
auto
1/4
auto
1/3
auto
Uh oh this is a yellow alert
Uh oh this is a red alert
Uh oh this is a blue alert
Uh oh this is a blue alert
Uh oh this is a blue alert 
This is a PRE tag
Uh oh this is an icon yellow alert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor, risus ac dapibus vehicula, nibh odio maximus ex, ac dignissim diam risus sed ante. Cras ac tempor velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eget leo sed ligula hendrerit rutrum sit amet in risus. Curabitur bibendum ut ligula eu mattis. Nam auctor non tellus quis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis felis est, scelerisque tempor purus id, volutpat sagittis erat.
Uh oh this is an icon blue alert
Uh oh this is an icon green alert
Uh oh this is an icon purple alert

Icon Lists

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

2 Column icon list

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

3 Column icon list

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

  • Icon list title

    this is some text this is some text this is some text this is some text this is some text

Dividers








Title 4 H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 4 H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 4 H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 3 H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 3 H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 3 H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 2 H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 2 H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 2 H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 1 H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 1 H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 1 H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 5 H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 5 H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

Title 5 H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at enim sed sapien scelerisque aliquet. Vitae viverra. Suspendisse sed rhoncus sapien.

H6 Heading
H5 Heading

H4 Heading

H3 Heading

H2 Heading

H1 Heading

  • Arrow 1 list item #1
  • Arrow 1 list item #2
  • Arrow 1 list item #3
  • Arrow 1 list item #4
  • Arrow 1 list item #5
  • Arrow 2 list item #1
  • Arrow 2 list item #2
  • Arrow 2 list item #3
  • Arrow 2 list item #4
  • Arrow 2 list item #5
  • Arrow 3 list item #1
  • Arrow 3 list item #2
  • Arrow 3 list item #3
  • Arrow 3 list item #4
  • Arrow 3 list item #5
Back