Artículos

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!