Typography

Typography

  • Clean and simple Typography
  • Full Shortcode Support
  • Many HTML Elements as Shortcodes
  • Add Colors, Classes, IDs and more

Headline 1 with Lines

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Headline 2 with Lines

Fancy Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Headline 3 with Lines

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Headline 4 with Lines

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Headline 5 with Lines

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Headline 6 with Lines

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.


Heading 1

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Heading 2

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Heading 3

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Heading 4

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Heading 5

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Heading 6

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Align Center

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.

Align Left

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.

Align Right

Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.

Minimal Shortcode

{h1}Headline{/h1}

Shortcode with some Options

{h2 lines="yes" color="primary" align="center"}Headline{/h2}
Parameter Name Description Possible values Default
lines Set this to yes to enable the Lines for the Headline
color The Color of the Headline default, white, black, success, info, warning, danger, primary, secondary, tertiary default
align The Align of the Headline left, center, right left
class Add a optional Class to the Shortcode
id Add a optional unique ID to the Shortcode
style Add optional Style Attributes to the Shortcode
animation Activates a Animation for this Element Many, check the Animations Page
animationduration How long should the Animation run Any positive Value for seconds 1s
animationdelay Should the Animation have a delay Any positive Value for seconds 0s

Drop Capitals

Whasellu lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Whasellu lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed massa quis elit sagittis tempor. Ut rutrum sem vel augue rhoncus vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

{dropcap text="W"}
{dropcap type="alternative" text="W"}

Colors

Colors are available for nearly every Element in the Template! You can access every Color in the Shortcodes OR as CSS Class, for example bg-color-success (Green Background), color-success (Green Text Color) or border-color-success (Green Border). The three Colors primary, secondary and tertiary can be defined in the Backend.

Default

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Success

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.


Info

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Warning

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.


Danger

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Primary

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.


Secondary

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

Tertiary

Aliquam ac scelerisque ligula. Morbi eget odio bibendum, bibendum nunc a, varius massa. Sed sodales accumsan cursus. Fusce eget urna non lectus sollicitudin posuere. Proin semper mi ac magna varius sodales.

HTML Elements as Shortcodes

Many HTML Elements are also available as Joomla Shortcodes. Check the Full list below. For all of these Elements are at least the following Parameters available: class, id, style, animation, animationdelay, animationduration.

Shortcode Matching HTML
{a} and {/a} <a> and </a>
{img} <img>
{div} and {/div} <div> and </div>
{span} and {/span} <span> and </span>
{b} and {/b} <b> and </b>

WSInfinity

We are WS-Theme, a creative and awesome group of individuals. In 2016 we set us a Goal to make the perfect Joomla Template. We believe this Joomla Template can make your life much more easier. We encourage you to try this Template, it will change your outlook on what a Joomla Template can do.

Contact us

  • Address: Untere Koppenhalde 11
    72406 Bisingen
    Germany
  • Email: office@braink.com
  • Phone: +88 (0) 144 5532 001

Newsletter

Sign up to our newsletter and get exclusive deals you wont find anywhere else straight to your inbox!

Menu

Style Switcher

This Demo Panel show only a minimum of the huge available Backend Options of this Joomla Template.




Backend View Shortcode System