sidebar

Nightly

search

H1 text example

H2 text example

H3 text example

H4 text example

H5 text example
H6 text example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Simple <code> element for source codes.

Highlights

Theme A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam mattis mauris vel varius. Morbi ullamcorper arcu nec feugiat tincidunt.

Theme B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam mattis mauris vel varius. Morbi ullamcorper arcu nec feugiat tincidunt.

Show source
<span class="highlight" data-theme="a">highlighted text</span>

Tags

Theme A

MusicMoviesBooks

Theme B

MusicMoviesBooks

Show source
<a class="ui-tag" data-theme="a" href="#">Tag</a>

Collapsibles

Collapsible List

Show source 
<div data-role="collapsible" data-content-theme="a" data-corners="false">
    <h4>Collapsible List</h4>
    <ul data-role="listview">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>

Collapsible Content

I am Collapsible

Inside is collapsible content.

Show source 
<div data-role="collapsible" data-content-theme="a" data-corners="false">
    <h4>Collapsible Contentt</h4>
    <div class='inset'>
    	<h3>I am collapsible title</h4>
    	<p>Inside is collapsible content.</p>
    </div>
</div>

Accordions

Content

I am title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tristique nulla.

Listview

Show source 
<div data-role="collapsible-set" data-theme="a" data-content-theme="a" data-corners="false">
    <div data-role="collapsible">
        <h3>Content</h3>
        <div class='inset'>
            <h3>I am title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tristique nulla.</p>
        </div>
    </div>
    <div data-role="collapsible">
        <h3>Listview</h3>
        <ul data-role="listview">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </div>  
</div>

Listview

Show source 
<ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="a">
    <li data-role="list-divider">Webdesign (theme A)
    <li data-theme="b"><a href="#">
        <img src="http://www.placehold.it/150x150">
        <h2>Website design</h2>
        <p>Description of your project.</p>
        <p class="ui-li-aside"><a class="ui-tag" data-theme="a" href="#">Webdesign</a><a class="ui-tag" data-theme="a" href="#">HTML</a>
    </a></li>
</ul>

First tab content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tristique nulla. Etiam ipsum neque, blandit quis tempus vel, consequat non dui. Aliquam vitae condimentum purus.

Show source 
<div data-role="tabs">
    <div data-role="navbar" data-shadow="false" data-corners="false">
        <ul>
          <li><a href="#one" data-theme="a" data-ajax="false">one</a></li>
          <li><a href="#two" data-theme="a" data-ajax="false">two</a></li>
          <li><a href="ajax-tab-content.html" data-theme="a" data-ajax="false">three</a></li>
        </ul>
    </div>
    <div id="one" class="ui-content">
    <h2>First tab content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in tristique nulla. Etiam ipsum neque, blandit quis tempus vel, consequat non dui. Aliquam vitae condimentum purus.</p>
    </div>
    <div id="two" class="ui-content">
        <ul data-role="listview">
            <li data-role="list-divider">Second tab list</li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </div>
</div>

NIGHTLY 2015. All rights reserved.