Shortcodes

Buttons

[su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#e51c23″ size= »4″ radius= »0″]Button[/su_button][su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#ff9800″ size= »4″ radius= »0″]Button[/su_button][su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#ffeb3b » color= »#727272″ size= »4″ radius= »0″]Button[/su_button][su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#259b24″ color= »#ffffff » size= »4″ radius= »0″]Button[/su_button][su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#03a9f4″ color= »#ffffff » size= »4″ radius= »0″]Button[/su_button][su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#9c27b0″ color= »#ffffff » size= »4″ radius= »0″]Button[/su_button][su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#e91e63″ color= »#ffffff » size= »4″ radius= »0″]Button[/su_button]

[su_row]

[su_column]
[su_tabs]
[su_tab title= »Tab Content 1″]Lorem ipsum mauris dapibus volutpat dapibus eu tristique neque tortor in placerat molestie inceptos, eleifend vulputate quis sit habitant consectetur vestibulum vulputate etiam libero proin eros. lorem nisl rutrum litora nam odio, aenean lobortis malesuada id, risus fringilla egestas ut.[/su_tab][su_tab title= »Tab Content 2″] Ullamcorper rutrum varius potenti pellentesque dui velit semper, venenatis curabitur lectus mollis dapibus metus platea eleifend non commodo, praesent habitasse mattis suspendisse fusce platea fames. lacinia luctus inceptos proin lacus dictumst nullam odio conubia, quis tortor facilisis vestibulum nulla a justo, nibh nostra rhoncus auctor fermentum vulputate conubia..[/su_tab][su_tab title= »Tab Content 3″]Praesent habitasse mattis suspendisse fusce platea fames. lacinia luctus inceptos proin lacus dictumst nullam odio conubia.[/su_tab]
[/su_tabs]
[/su_column]

[su_column]
[su_spoiler title= »Spoiler Content 1″]Lorem ipsum mauris dapibus volutpat dapibus eu tristique neque tortor in placerat molestie inceptos, eleifend vulputate quis sit habitant consectetur vestibulum vulputate etiam libero proin eros. lorem nisl rutrum litora nam odio, aenean lobortis malesuada id, risus fringilla egestas ut.[/su_spoiler]
[su_spoiler title= »Spoiler Content 2″] Ullamcorper rutrum varius potenti pellentesque dui velit semper, venenatis curabitur lectus mollis dapibus metus platea eleifend non commodo, praesent habitasse mattis suspendisse fusce platea fames. lacinia luctus inceptos proin lacus dictumst nullam odio conubia, quis tortor facilisis vestibulum nulla a justo, nibh nostra rhoncus auctor fermentum vulputate conubia.[/su_spoiler]
[su_spoiler title= »Spoiler Content 3″]Praesent habitasse mattis suspendisse fusce platea fames. lacinia luctus inceptos proin lacus dictumst nullam odio conubia.[/su_spoiler]
[/su_column]

[/su_row]

[su_row]

[su_column size= »1/3″]Lorem ipsum inceptos sem primis diam ante et ultricies laoreet fusce hendrerit euismod dictum augue, aliquet in fermentum integer eu dolor vestibulum nisl viverra luctus cubilia nullam dictum. lectus vivamus volutpat bibendum solde torquent diam accumsan maec unus at.

[su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#03a9f4 » center= »yes »]Read More[/su_button][/su_column]

[su_column size= »1/3″]Lorem ipsum inceptos sem primis diam ante et ultricies laoreet fusce hendrerit euismod dictum augue, aliquet in fermentum integer eu dolor vestibulum nisl viverra luctus cubilia nullam dictum. lectus vivamus volutpat bibendum solde torquent diam accumsan maec unus at.

[su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#9c27b0″ center= »yes »]Read More[/su_button][/su_column]

[su_column size= »1/3″]Lorem ipsum inceptos sem primis diam ante et ultricies laoreet fusce hendrerit euismod dictum augue, aliquet in fermentum integer eu dolor vestibulum nisl viverra luctus cubilia nullam dictum. lectus vivamus volutpat bibendum solde torquent diam accumsan maec unus at.

[su_button url= »http://www.example.com » target= »blank » style= »soft » background= »#e91e63″ center= »yes »]Read More[/su_button][/su_column]

[/su_row]

Column layouts

[su_row]
[su_column size= »1/1″] Lorem ipsum dolor sit amet, consectetur adipiscing elit euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

1/2 + 1/2

[su_row]
[su_column size= »1/2″] Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size= »1/2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

1/3 + 1/3 + 1/3

[su_row]
[su_column size= »1/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size= »1/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size= »1/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

1/2 + 1/4 + 1/4

[su_row]
[su_column size= »1/2″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size= »1/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. [/su_column]
[su_column size= »1/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. [/su_column]
[/su_row]

3/4 + 1/4

[su_row]
[su_column size= »3/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit. [/su_column]
[su_column size= »1/4″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[/su_row]

1/5 + 4/5

[su_row]
[su_column size= »1/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[su_column size= »4/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

2/5 + 3/5

[su_row]
[su_column size= »2/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique. [/su_column]
[su_column size= »3/5″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[/su_row]

2/3 + 1/6 + 1/6

[su_row]
[su_column size= »2/3″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column]
[su_column size= »1/6″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[su_column size= »1/6″] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/su_column]
[/su_row]