Elements

Headings

Quadratic provides the option of choosing the size of the h-tags and includes 3 custom styles and 6 color options.

HEADING 1

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

HEADING 2

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

HEADING 3

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

HEADING 4

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

HEADING 5

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

HEADING 6

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

LINE HEADING

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

UNDERLINED HEADING

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.

BAR HEADING

Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra.


Blockquotes

Examples for single and milti lined blockquotes and cite tag.

Single line blockquote:

Be the change that you wish to see in the world.

Multi line blockquote with a cite reference:

Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.

Rob Siltanen


Accordion

The accordion element can be basic, multi-expand and all-closed.

  • Lorem ipsum dolor sit amet

    Donec iaculis facilisis leo sed imperdiet. Vestibulum non placerat enim. Ut sed arcu ut nulla vehicula pellentesque. Aliquam in nunc eget velit viverra sagittis. Duis ligula libero, vestibulum cursus risus id, consequat porta nisi. Ut porta lorem sed mauris eleifend, a finibus nisl suscipit.

  • Mauris enim nisl varius

    Mauris quis consequat lectus. Suspendisse a mauris nec libero lobortis rutrum vitae quis lorem. Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti.

  • Quisque gravida libero vel

    Sed mauris tortor, consectetur id ante a, sodales laoreet turpis. Sed ac odio lobortis tortor auctor aliquet. Praesent iaculis lectus nec turpis semper, quis varius nibh varius. Nulla tincidunt, mi et feugiat scelerisque, turpis leo tempor erat, imperdiet rhoncus nulla libero non leo.

  • Pellentesque eleifend sapien non velit

    Pellentesque eleifend sapien non velit cursus vulputate. Mauris felis est, egestas nec efficitur eget, finibus et nunc. Vestibulum tristique, metus ut sollicitudin dignissim, libero eros rutrum turpis, a interdum.

  • Vestibulum bibendum tortor

    Cras aliquet lacinia arcu in placerat. Aliquam ornare turpis ac mauris fringilla, sed laoreet neque lobortis. Phasellus id dolor massa. Donec fermentum consectetur libero vel cursus.

  • Aliquam ornare turpis ac

    Proin cursus sodales ante, ut finibus urna dapibus eu. Nulla eleifend, leo in ultricies suscipit, nisi dui aliquam orci, sed sagittis lacus augue ac arcu.


Tabs

The tabs element has 2 options – horizontal and vertical.

Aliquam in elit sit amet velit maximus hendrerit vitae eget enim. Aliquam congue eget tellus ac semper. Pellentesque sodales justo a leo consectetur molestie. Suspendisse potenti. Duis ac ante vel mauris mollis pharetra. Suspendisse semper porta risus sit amet tincidunt. Phasellus semper auctor quam.
Proin fringilla felis cursus tortor ornare congue. Praesent imperdiet augue quis dui congue, mattis lacinia tellus sagittis. Nullam id leo vitae lorem varius imperdiet. Sed mauris tortor, consectetur id ante a, sodales laoreet turpis. Sed ac odio lobortis tortor auctor aliquet.
Fusce tincidunt ligula vel odio hendrerit fringilla et fermentum. Nam aliquet nulla non erat facilisis aliquam. Sed ornare, augue vel cursus scelerisque, nulla felis rhoncus odio, et dapibus ipsum elit quis ligula. Ut lacinia et augue pretium aliquam. Sed dolor magna, iaculis ut elit ut, placerat sodales ligula.

Mauris felis est, egestas nec efficitur eget, finibus et nunc. Vestibulum tristique metus ut sollicitudin dignissim, libero eros rutrum turpis, a interdum massa lacus laoreet purus. Vestibulum bibendum tortor eu erat scelerisque, a posuere ex eleifend. Cras aliquet lacinia arcu in placerat. Aliquam ornare turpis ac mauris fringilla, sed laoreet neque lobortis. Phasellus id dolor massa.
Donec fermentum consectetur libero vel cursus. Praesent quam dolor, lobortis convallis sapien varius, convallis laoreet est. Nam ullamcorper felis eu felis bibendum, in viverra erat pulvinar. Nunc in ante finibus, pellentesque lacus ut, ultrices odio. Aenean tristique ac turpis sit amet ornare.
Donec maximus viverra lectus sit amet efficitur. Quisque ante ligula, commodo et ligula a, convallis pretium augue. In tristique tempor sem id posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Carousel

The carousel element has one-column, two-column, three-column, four-column, five-column and six-column options.


Callout

The callout element has 7 color options – basic, theme accent color, primary, secondary, success, warning and alert.

Your Message Here
Your Message Here