HTML Elements & Typography

A page can also have a subtitle

Heading one is a big heading.

This is a normal paragraph, blandit scelerisque. Ut vestibulum porttitor urna id pulvinar. Mauris lorem nibh, tempus ut facilisis non, vulputate quis sapien. Aenean tempus tincidunt magna, ut egestas turpis elementum quis. Ut viverra ullamcorper augue, lacinia gravida est ullamcorper tempor. Maecenas et enim purus, sit amet scelerisque nunc. Phasellus volutpat venenatis erat a hendrerit.

Cras dapibus velit vitae magna imperdiet volutpat elementum mauris malesuada. In imperdiet rhoncus justo, sit amet luctus velit aliquet sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading two is for subtitles.

Morbi egestas nulla orci. Curabitur auctor ante et elit imperdiet rutrum. Cras in felis a justo lobortis bibendum.
Praesent eu tincidunt diam. Praesent consequat eleifend justo eget varius. Vestibulum iaculis laoreet ante id aliquet. Maecenas nec eros a nulla pretium bibendum. Suspendisse eget facilisis nibh.
- Vivamus tincidunt lorem at nunc egestas in fringilla nunc gravida. Sed sit amet nisl lorem.
- Aenean fringilla metus id nunc porttitor eget gravida dui auctor. Nulla tincidunt condimentum vestibulum.
Nam posuere, nibh a feugiat dignissim, augue augue gravida justo, sit amet convallis nibh dolor non risus.

Aliquam suscipit mi quis eros aliquet faucibus. Etiam convallis rutrum elementum. Donec semper suscipit odio, vel porttitor augue scelerisque nec. Nunc id metus placerat ipsum pharetra venenatis. Morbi quis libero metus, a tempor tortor. In ultricies, justo in congue vestibulum, risus diam porttitor eros, a lobortis libero neque sed metus. Pellentesque sit amet metus fermentum magna ullamcorper blandit. Aenean quis felis at tellus pretium ullamcorper a sed urna. Maecenas mi odio, feugiat vestibulum scelerisque ut, vestibulum non dolor. Fusce ut nisi nec tortor lobortis bibendum.

Heading three has a mixed use, normally it's used for larger subtitles.

Curabitur ac ipsum lacinia tortor mollis varius. Ut volutpat gravida ultricies. Aenean non sodales tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; In dignissim, sapien sit amet interdum ultricies, ante felis elementum tortor, vitae tempor turpis sem commodo metus. Proin nec nisl nibh. Fusce volutpat accumsan mi in dictum.
Ut eu sapien eu dolor molestie mattis. Suspendisse luctus dolor ut risus dapibus cursus. Donec sollicitudin porta arcu, quis volutpat tellus ultrices eget

Heading four is the fourth most used heading and like heading three, it tends to have more text in.

Proin id augue turpis. Etiam vehicula auctor porta. Aliquam erat volutpat. Aliquam bibendum, erat vitae consectetur aliquet, dolor magna varius tortor, a rutrum ante erat nec nisl. Mauris dapibus consequat diam quis viverra.

"If you tell the truth you don’t have to remember anything."Mark Twain

Duis sed ante vitae dolor porttitor facilisis id posuere mi. Cras leo nisl, consectetur eu pulvinar at, fermentum at leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac dolor nec felis fringilla pretium. Suspendisse sagittis fringilla dolor vel dignissim. Phasellus fringilla tempus dapibus.

Heading five is rarely used but it looks like this.

Praesent scelerisque egestas mauris, in porta magna malesuada vel. Suspendisse id sapien vel nulla viverra vehicula dictum in dui. Aliquam erat volutpat. Curabitur varius accumsan ante dictum tempus. Nulla sed placerat nibh. Phasellus a nulla id justo luctus aliquam at vitae ligula. Vestibulum pharetra, orci sed lacinia elementum, ligula lectus faucibus sem, at suscipit felis ipsum vitae nulla.

Social Media Icons

These icons are created using the Zocial icon font through Fontello, this means you can edit the background colours, font size etc. easily with CSS.

Small Buttons

Small Button Small Button Small Button Small Button Small Button Small Button Small Button Small Button

Medium Buttons

Rounded Medium Button Rounded Medium Button Rounded Medium Button Rounded Medium Button Rounded Medium Button Rounded Medium Button Rounded Medium Button Rounded Medium Button

Large Buttons

Large Button Large Button Large Button Large Button Large Button Large Button Large Button Large Button

Icon buttons using Font Awesome

Music Search Like Something Printer Arrow Twitter Credit Card

Accordion

Print Design

Web Design

Ut vel neque sit amet lectus facilisis ornare

Nulla luctus ultricies justo, eget molestie sapien aliquet eu. Vestibulum euismod dui sed mauris adipiscing eget dapibus nibh lacinia. Pellentesque posuere nulla quis lectus iaculis pellentesque. Donec enim magna, euismod nec eleifend sit amet, rhoncus eget neque. Proin interdum nibh at augue ullamcorper quis pellentesque est consectetur.

Aenean vel tortor mi, ut pretium lacus. Proin fermentum ipsum eget eros ullamcorper scelerisque. Sed posuere erat dignissim purus porta eleifend.

Logo Design

Sed commodo venenatis augue non tincidunt. Curabitur pretium, eros at feugiat vehicula, massa leo semper turpis, non auctor magna justo quis diam. . Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec consequat, urna quis vulputate tempus, tellus arcu semper erat, sed mattis metus felis ut sem. Mauris ac risus leo.

Email Design

Donec enim magna, euismod nec eleifend sit amet, rhoncus eget neque. Proin interdum nibh at augue ullamcorper quis pellentesque est consectetur. Aenean vel tortor mi, ut pretium lacus. Proin fermentum ipsum eget eros ullamcorper scelerisque. Sed posuere erat dignissim purus porta eleifend. Sed commodo venenatis augue non tincidunt. Curabitur pretium, eros at feugiat vehicula, massa leo semper turpis, non auctor magna justo quis diam. Ut vel neque sit amet lectus facilisis ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec consequat, urna quis vulputate tempus, tellus arcu semper erat, sed mattis metus felis ut sem. Mauris ac risus leo.

Toggles

Print Design

Web Design

Ut vel neque sit amet lectus facilisis ornare

Aenean vel tortor mi, ut pretium lacus. Proin fermentum ipsum eget eros ullamcorper scelerisque. Sed posuere erat dignissim purus porta eleifend.

Logo Design

Email Design

Tabs

Active tab Hidden tab

Curabitur pretium, eros at feugiat vehicula, massa leo semper turpis, non auctor magna justo quis diam. Ut vel neque sit amet lectus facilisis ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.

Duis mattis, nisl sit amet scelerisque gravida, justo massa commodo ipsum, quis bibendum magna justo id est. Nulla luctus ultricies justo, eget molestie sapien aliquet eu. Vestibulum euismod dui sed mauris adipiscing eget dapibus nibh lacinia. Pellentesque posuere nulla quis lectus iaculis pellentesque. Donec consequat, urna quis vulputate tempus, tellus arcu semper erat, sed mattis metus felis ut sem. Mauris ac risus leo

Duis mattis, nisl sit amet scelerisque gravida, justo massa commodo ipsum, quis bibendum magna justo id est. Nulla luctus ultricies justo, eget molestie sapien aliquet eu. Vestibulum euismod dui sed mauris adipiscing eget dapibus nibh lacinia. Pellentesque posuere nulla quis lectus iaculis pellentesque. Donec enim magna, euismod nec eleifend sit amet, rhoncus eget neque. Proin interdum nibh at augue ullamcorper quis pellentesque est consectetur.

Aenean vel tortor mi, ut pretium lacus. Proin fermentum ipsum eget eros ullamcorper scelerisque. Sed posuere erat dignissim purus porta eleifend. Sed commodo venenatis augue non tincidunt. Curabitur pretium, eros at feugiat vehicula, massa leo semper turpis, non auctor magna justo quis diam. Ut vel neque sit amet lectus facilisis ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec consequat, urna quis vulputate tempus.

Gallery