Typography

This is a Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a Heading 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

 

Below is a sample of <pre> or code class

#right{
width: 180px;
float: right;
color: #EEEEEE;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry.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.

Stickynote and Download

This is a sample clip note. Use class stickynote for tag p to form a clip note!

This is a sample download. Use class download for tag p to form a download!

Icon styles example

This is a sample p with class error

This is a sample p with class warn

This is a sample p with class tips

This is a sample p with class help

This is a sample p with class info

This is a sample p with class print

This is a sample p with class rss

This is a sample p with class save

This is a sample p with class lock

This is a sample p with class user

This is a sample p with class new

This is a sample p with class house

This is a sample p with class tag

Unordered list examples

  • This is a sample unordered list
  • ul with class arrow
  • ul with class arrow-2
  • ul with class star
  • ul with class rss
  1. This is a sample ordered list
  • ul with class check
  • ul with class minus
  • ul with class add
  • ul with class delete

This is a Magazine Style Drop Cap. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Legend style

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

03Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat!

Block1 example

This is a div with class sp-block1
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Block2 example

This is a div with class sp-block2
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Block3 example

This is a div with class sp-block3
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Block4 example

This is a div with class sp-block4
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Block5 example

This is a div with class sp-block5
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Block6 example

This is a div with class sp-block6
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Block7 example

This is a div with class sp-block7
Lorem ipsum dolor sit amet, sic genero nomine Piscatore mihi. Dicis Deducitur potest flens praemio quod non dum veniens indica enim.

Inline labels

LabelsMarkup
Default <span class="sp-label">Default</span>
Success <span class="sp-label label-success">Success</span>
Warning <span class="sp-label label-warning">Warning</span>
Important <span class="sp-label label-important">Important</span>
Info <span class="sp-label label-info">Info</span>
Inverse <span class="sp-label label-inverse">Inverse</span>

Badges

NameExampleMarkup
Default 1 <span class="sp-badge">1</span>
Success 2 <span class="sp-badge badge-success">2</span>
Warning 4 <span class="sp-badge badge-warning">4</span>
Important 6 <span class="sp-badge badge-important">6</span>
Info 8 <span class="sp-badge badge-info">8</span>
Inverse 10 <span class="sp-badge badge-inverse">10</span>
Alert Warning
Warning! Best check yo self, you're not looking too good.
Alert Danger
Danger! Best check yo self, you're not looking too good.
Alert Success
Success! Best check yo self, you're not looking too good.
Alert Information
Information! Best check yo self, you're not looking too good.

Tables examples

Table with data on the right head side
Column 1 Column 2 Column 3 Column 4
Row 1 Row 1 Row 1 Row 1
Row 2 Row 2 Row 2 Row 2
Row 3 Row 3 Row 3 Row 3
Row 4 Row 4 Row 4 Row 4
Row 5 Row 5 Row 5 Row 5

Colourful Button groups Examples

Animated Button

Form Examples

Some value here
Something may have gone wrong
Please correct the error
Woohoo!
Woohoo!

Module Variations

Welcome to Shaper Crux template. This is the blank template for joomla based on Helix Framewok. You are seeing main content area of this template.

Helix Overview

Imagine yourself dwelling in a world of super fast website building capacity. You just see it fully grown up even before you feel that you have just started building it! Helix Framework is here to make you feel the difference in the world of website designing. This product has been developed by JoomShaper, your trusted friend in the Joomla world, for an easy accessibility to the way of building Joomla based websites with hundreds of easy tasking features.

What does it intend to do? Well, it is as simple as this question- it will make your experience of creating website much smoother than ever before. Helix Framework aims to open all the possible doors to you to create highly sophisticated website in less time. It has come with built-in CSS and JavaScript compression for you to make it unbelievably faster!

Read more...

Module Positions

module positions

All Positions

module positions

Subcategories