SharpBox

You can find a full example for a sharp box box layout here. There are 6 sharp icons: ct-sharp-icon-video, ct-sharp-icon-camera, ct-sharp-icon-toggle, ct-sharp-icon-settings, ct-sharp-icon-sheet and ct-sharp-icon-screen.

The template will automatically assign the right icons to the elements with the defined classes.

The class ct-sharp-row is using 100% of the available width, so in order to create boxes you have 5 possibilities for ct-sharp-box: ct-sharp-box-25, ct-sharp-box-33, ct-sharp-box-50, ct-sharp-box-75 and ct-sharp-box-100

Available icon background classes: ct-sharp-iconbg-red, ct-sharp-iconbg-green, ct-sharp-iconbg-yellow, ct-sharp-iconbg-blue, ct-sharp-iconbg-brown and ct-sharp-iconbg-darkgreen

You can create as many SharpBox rows as desired.

            
            <div class="ct-sharp-row">
                <div class="ct-sharp-box ct-sharp-box-33">
                    <div class="ct-sharp-iconbg-red ct-sharp-icon-video ct-sharp-diagonal"> </div>
                    <h1>Videos</h1>
                    <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                    <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                    <a class="ct-sharp-button" href="videos.html"> </a>
                </div>
                <div class="ct-sharp-box ct-sharp-box-33">
                    <div class="ct-sharp-iconbg-green ct-sharp-icon-camera"> </div>
                    <h1>Screenshots</h1>
                    <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                    <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                    <a class="ct-sharp-button" href="articles.html"> </a>
                </div>
                <div class="ct-sharp-box ct-sharp-box-33">
                    <div class="ct-sharp-iconbg-yellow ct-sharp-icon-toggle"> </div>
                    <h1>Statistics</h1>
                    <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                    <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                    <a class="ct-sharp-button" href="articles.html"> </a>
                </div>
            </div>
            
        

ContentBox

Works similar to the SharpBox, except that it's useful within joomla articles or custom html modules. You can find a full example for a content box layout here.

The big difference to the SharpBox is the plain design but also the usage of 100% width. This means you have different layout options: ct-content-box-25, ct-content-box-33, ct-content-box-50, ct-content-box-75, ct-content-box-100

            
                <div class="ct-content-row">
                    <div class="ct-content-box ct-content-box-33"><iframe src="http://www.youtube.com/embed/PlDtqO1hR3k" width="100%" frameborder="0" allowfullscreen=""></iframe>
                        <h3>Lorem Ipsum</h3>
                        <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                        <a href="#">Total Views 1758</a>
                    </div>
                    <div class="ct-content-box ct-content-box-33"><iframe src="http://www.youtube.com/embed/FnEdZZylpg0" width="100%" frameborder="0" allowfullscreen=""></iframe>
                        <h3>Lorem Ipsum</h3>
                        <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                        <a href="#">Total Views 1639</a>
                    </div>
                    <div class="ct-content-box ct-content-box-33"><iframe src="http://www.youtube.com/embed/VXvSvugLaqk" width="100%" frameborder="0" allowfullscreen=""></iframe>
                        <h3>Lorem Ipsum</h3>
                        <p>Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor.</p>
                        <a href="#">Total Views 989</a>
                    </div>
                </div>