Shordcodes test - Severity Design

Shordcodes test

[row][full_width]

Tabs test:

[tab]

[tab_nav]

[tab_link id=”tab1″]This the the first tab[/tab_link]

[tab_link id=”tab2″ state=”active”]This one is active[/tab_link]

[/tab_nav]

[tab_body]

[tab_content id=”tab1″]

First tab

lorem ipsum just for show off

[/tab_content]

[tab_content id=”tab2″ state=”active”]

Active tab

 lorem ipsum just for show off. It’s active. lorem ipsum just for show off. It’s active.lorem ipsum just for show off. It’s active.lorem ipsum just for show off. It’s active.

[/tab_content]

[/tab_body]

[/tab]

[/full_width][/row]

 

[row]
[one_half]

Accordions:

[accordion id=”acc_one”]

[accordion_entry id=”acc_one”  q=”Does this accordion should be opened?” state=”opened”]

Yes it should!

[/accordion_entry]

[accordion_entry id=”acc_one” q=”This one should be colsed.”]

But as you can see you can open it. This of course hide the first one.

[/accordion_entry]

[/accordion]
[/one_half]
[one_half]

Accordions:

[accordion id=”acc_one”]

[accordion_entry id=”acc_one”  q=”Does this accordion should be opened?” state=”opened”]

Yes it should!

[/accordion_entry]

[accordion_entry id=”acc_one” q=”This one should be colsed.”]

But as you can see you can open it. This of course hide the first one.

[/accordion_entry]

[/accordion]
[/one_half]
[/row]
[row]
[full_width]

Alert boxes:

[alert]Info Just to inform you. To create this info box wrap any text  in “alert” shortcode and set “style” attribute to “info” value (default)[/alert]

[alert style=”success”]Success Account created! To create this success box wrap any text in “alert” shortcode and set “style” attribute to “success” value.[/alert]

[alert style=”warning”]Warning! Insecure password. To create this warning wrap any text in “alert” shortcode and set “style” attribute to “warning” value[/alert]

[alert style=”error”]Error! Terrible, terrible damage! To create this error box wrap any text  in “alert” shortcode and set “style” attribute to “error” value[/alert]

[/full_width]
[/row]

[row]
[full_width]

List styles:

[/full_width]
[one_fourth]
[ul style=”check”]

  • This is a custom
  • unordered list style
  • made with a shortcode

[/ul]
[/one_fourth]
[one_fourth]
[ul style=”star”]

  • This is a custom
  • unordered list style
  • made with a shortcode

[/ul]
[/one_fourth]
[one_fourth]
[ul style=”arrow”]

  • This is a custom
  • unordered list style
  • made with a shortcode

[/ul]
[/one_fourth]
[one_fourth]
[ul style=”bullet”]

  • This is a custom
  • unordered list style
  • made with a shortcode

[/ul]
[/one_fourth]
[/row]

Simple buttons test:

To insert a button use “button” tag. You can control the size of button by adding attribute – “large”, “medium” or “small” (medium by default). You can also add “style” attribute and set it to “simple” but it is not necessary as it is the default value.

[button to=”http://google.com” size=”small”]Small go to google button[/button]

[button to=”http://google.com” size=”medium”]Medium go to google button[/button]

[button to=”http://google.com” size=”large”]Large go to google button[/button]

Shiny buttons test:

To use the shiny buttons like those below just change the “style” attribute value to “shiny”.

[button to=”http://google.com” size=”small” style=”shiny”]Small go to google button[/button]

[button to=”http://google.com” size=”medium” style=”shiny”]Medium go to google button[/button]

[button to=”http://google.com” size=”large” style=”shiny”]Large go to google button[/button]

Video embed test:

Youtube test:

[video_embed link=”http://www.youtube.com/embed/JaAWdljhD5o”]

Vimeo Test:

[video_embed link=”http://player.vimeo.com/video/65289245″]

 

 

Leave Your Comment