Sample Content

Various sample content examples.

Markdown

We recommend using markdown for basic content editing, because it is fast to write, easy to read and prevents html-coding errors. Read more about markdown or check this tutorial. Although markdown is preferred for basic content editing, you will often need to use html for more complicated stuff.

2-Column Grid

profile

Hi!
My name is Bob Dobalina, and this website is my blog as well as a playground for the X3 Photo Gallery website CMS. View Demo

About me
I am interested in design, functionality, minimalism and performance. My hobbies are sleep-walking, planking and fishing.

Article
More than a decade ago, when SWF was an emerging technology, this website became a very popular showcase of Flash. See Post

Block Grid

  • Block Grid
    Block grids give you a way to evenly separate contents of a list within a grid. If you want to create a row with a specific amount of elements that need to stay evenly spaced, the block grid is your friend.

Carousel Plugin

Camel

Fish

Squirrel

Goat

Elephant

Ox

Whale

Blowfish

Turtle

Embed Sources

Vimeo

Youtube

Google Maps

Self-hosted Video

Font Icons

Easily add icons into your page designs with the included Font Awesome. Font icons are vector-based, so they look good at any size, and can be styled with CSS.

  • Custom Forms

    Add any elements to your contact form. All data will be forwarded by email.

    Ice Cream Flavor
    Favorite color
    I like to
    Message

    Modal Plugin

    The modal plugin allows you to open popup dialog windows, useful for displaying relevant information. Modals are usually triggered by buttons, but can also be triggered on page-load.

    Tabs

    Tabs content plugin

    The tabs plugin allows you to easily add an interactive tabs section anywhere in your content. Tabs can be useful to separate related content into clickable sections. Choose from horizontal or vertical orientation, three styles and several helper classes. Tabs respond appropriately on small (mobile) screens, and page will scroll to fit tabs when there is extensive content.

    Sample Code

    To create a tabs-layout, you need to use the following code:













    This is the first panel of the basic tab example. You can place all sorts of content here including a grid.



    This is the second panel of the basic tab example. This is the second panel of the basic tab example.



    This is the third panel of the basic tab example. This is the third panel of the basic tab example.



    This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.





    Styles

    vertical
    Include the vertical class in both your UL tabs element and your tabs-content element set vertical tabs orientation, instead of the default horizontal orientation.

    tabs-style-1tabs-style-2
    Include any style class in your tabs-container element, to add a style different from the default style.

    tabs-anim
    Include the tabs-anim class in your tabs-container element to make your tabs fade in on change.

    tabs-radius
    Include the tabs-radius in your tabs-container element class to give your tabs rounded corners.

    tabs-color-active
    Include the tabs-color-active class in your tabs-container element to colorize the active tab.

    tabs-wide
    Include the tabs-wide class in your tabs-container element to make your tabs wider. * Only applies for horizontal tabs orientation.

    tabs-smalltabs-large
    Include the tabs-small or tabs-large class in your tabs-container element to make your tabs smaller or bigger. Does not apply for small (mobile) screens.

    tabs-centertabs-right
    Include the tabs-center or tabs-right class in your tabs-container element to make your tabs align center or right, instead of the default left. * Only applies for horizontal tabs orientation.

    tabs-width-30tabs-width-50tabs-width-auto
    Include the tabs-width-30, tabs-width-50 or tabs-width-auto class in your tabs-container element to set the % width of your vertical orientation tabs, instead of the default 20%.* Only applies for vertical tabs orientation.

    small-block-grid-*
    Include the small-block-grid-* class in your UL tabs element to make your tabs justify to full width. Replace the * with the amount of tabs you have. * Only applies for horizontal tabs orientation.

    Sample Content

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac rutrum est. Aliquam sit amet risus aliquet, sagittis risus eu, facilisis ex. Fusce eu neque et purus accumsan maximus maximus nec lacus. Nulla auctor augue ut fermentum venenatis. Donec volutpat ullamcorper felis, in tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eleifend finibus tellus, et consectetur nulla pellentesque eu. In et justo risus. Donec sed dolor sit amet dolor cursus aliquam ut vel justo. Praesent sed quam diam. Duis scelerisque lectus non venenatis elementum.

    Ok! Etiam id commodo lorem. Nulla maximus fermentum nibh eget consectetur. Suspendisse luctus nunc orci, eget varius arcu tempor non. Duis ac efficitur augue, eu sollicitudin nisi. Praesent ligula tellus, consequat non tellus sit amet, fringilla gravida justo. Duis in justo at magna ornare tristique quis non risus. Fusce feugiat finibus urna quis rhoncus. Praesent feugiat eget tortor quis imperdiet. Praesent nulla lacus, ornare vel velit non, efficitur fringilla nibh. Cras nisi sapien, dapibus pretium nunc a, rhoncus tincidunt urna. Donec tristique nunc turpis, sed aliquam leo tincidunt sit amet. Integer vitae vehicula elit. Pellentesque aliquet nisi sit amet ullamcorper facilisis. Morbi quis turpis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

    Alert Box

    Alert boxes allow you to emphasize content by adding it inside a box. [code]

    Alert box example

    This is a simple alert-box with text and images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, risus quis malesuada fringilla, metus nulla consectetur mi, a ullamcorper mi eros et mi. Pellentesque facilisis libero at orci finibus porta quis eget urna.

    • Dismissible Alert Box

    This alert box can be dismissed by clicking the close button.
    This is a minimal alert box. Close it!

    Labels

    label
    Use labels to add emphasis to any content.

    Text

    You can choose from the following color tags:

    primaryalertwarningsuccessinfodefaultbg2bg3

    Code Highlighter

    Use the code highlighter to colorize code for easy viewing and copying. Useful for technical articles.

    
var googoo = 'gaga';
function get_googoo(){
    return googoo;
}
get_googoo(); // returns 'gaga'

    Toggle Content

    Sometimes you want to hide long sections of content until the visitor chooses to view more. Simply add a toggle button link, and an element that contains the hidden content. You can toggle any kinds of content and the toggle link can be before or after the hidden content. Toggle can also be effective to create FAQs or to simply hide long image descriptions like in this example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique quis justo luctus pulvinar. Nulla venenatis lacus eget sapien pretium dignissim. Duis feugiat magna vitae fermentum euismod.
    more

    code



    This text is hidden.
    more


    more
    This text is hidden.



    OPEN
    This text is hidden.
    Blog Post