Button & List

[idz_col_full class=””]

[idz_code][idz_button color=”green” size=”medium” label=”Button Green” icon=”icon-chevron-right” link=”#” target=”_blank” type=”square” class=””][/idz_code]

Parameter

[idz_panel color=”white” class=””]

[idz_list type=”check” class=””]

• color : default | green | blue | yellow | red | grey | white | black
• size: small | medium | large
• label: label text of button
• icon: name of icon
• link: link to url
• target: _blank (link open in the new tab) or _self (link open in the same tab)
• type: square | radius | round
• class: optional class

[/idz_list]

[/idz_panel]

[idz_heading tag=”h3″ class=” firstword-bold”]Button Color[/idz_heading]

[idz_button color=”” size=”” label=”Button Default” icon=”” link=”” target=”_blank” type=”square” class=””] [idz_button color=”green” size=”medium” label=”Button Green” icon=”” link=”#” target=”_blank” type=”square” class=””] [idz_button color=”blue” size=”medium” label=”Button Blue” icon=”” link=”#” target=”_blank” type=”square” class=””] [idz_button color=”yellow” size=”medium” label=”Button Yellow” icon=”” link=”” target=”_blank” type=”square” class=””] [idz_button color=”red” size=”medium” label=”Button Red” icon=”” link=”#” target=”_blank” type=”square” class=””] [idz_button color=”grey” size=”medium” label=”Button Grey” icon=”” link=”#” target=”_blank” type=”square” class=””] [idz_button color=”white” size=”medium” label=”Button White” icon=”” link=”#” target=”_blank” type=”square” class=””] [idz_button color=”black” size=”medium” label=”Button Black” icon=”” link=”#” target=”_blank” type=”square” class=””]

[/idz_col_full]

[idz_col_full class=””]

[idz_heading tag=”h3″ class=” firstword-bold”]Button Size[/idz_heading]

[idz_button color=”orange” size=”small” label=”Small Button” icon=”” link=”” target=”_blank” type=”square” class=””] [idz_button color=”orange” size=”medium” label=”Medium Button” icon=”” link=”” target=”_blank” type=”square” class=””] [idz_button color=”orange” size=”large” label=”Large Button” icon=”” link=”” target=”_blank” type=”square” class=””] [idz_button color=”orange” size=”small” label=”Small Button” icon=”fa-chevron-circle-right” link=”” target=”_blank” type=”square” class=””] [idz_button color=”orange” size=”medium” label=”Medium Button” icon=”fa-chevron-circle-right” link=”” target=”_blank” type=”square” class=””] [idz_button color=”orange” size=”large” label=”Large Button” icon=”fa-chevron-circle-right” link=”” target=”_blank” type=”square” class=””]

[/idz_col_full]

[idz_col_full class=””]

[idz_heading tag=”h3″ class=” firstword-bold”]Button Group with Right Icon[/idz_heading]

[idz_button color=”blue” size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_blank” type=”square” class=”” icon_align=”right”] [idz_button color=”green” size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_blank” type=”square” class=”” icon_align=”right”] [idz_button color=”yellow” size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_self” type=”square” class=”” icon_align=”right”] [idz_button color=”red” size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_self” type=”square” class=”” icon_align=”right”] [idz_button color=”grey” size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_self” type=”square” class=”” icon_align=”right”] [idz_button color=”white”  size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_self” type=”square” class=”” icon_align=”right”] [idz_button color=”black”   size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_self” type=”square” class=”” icon_align=”right”]

[idz_heading tag=”h3″ class=” firstword-bold”]Button Group with Left Icon[/idz_heading]

[idz_button color=”red” size=”small” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_blank” type=”square” class=”” icon_align=”left”] [idz_button color=”blue” size=”medium” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_blank” type=”square” class=”” icon_align=”left”] [idz_button color=”green” size=”large” label=”Button Group” icon=”icon-chevron-right” icon_group=”yes” link=”#” target=”_self” type=”square” class=”” icon_align=”left”]

[/idz_col_full]

[idz_col_full class=””]

[idz_heading tag=”h3″ class=” firstword-bold”]Button Style[/idz_heading]

[idz_button color=”blue” size=”medium” label=”Square Button” icon=”” link=”#” target=”_blank” type=”square” class=””] [idz_button color=”green” size=”medium” label=”Round Button” icon=”” link=”#” target=”_blank” type=”round” class=””]  [idz_button color=”red” size=”medium” label=”Radius Button” icon=”” link=”#” target=”_blank” type=”radius” class=””] [idz_button color=”grey” size=”medium” label=”Square Button Border” icon=”” link=”#” target=”_blank” type=”square_stroke”] [idz_button color=”green” size=”medium” label=”Round Button Border” icon=”” link=”#” target=”_blank” type=”round_stroke”] [idz_button color=”yellow” size=”medium” label=”Radius Button Border” icon=”” link=”#” target=”_blank” type=”radius_stroke” class=”button-border”]

[/idz_col_full]

[idz_spacer height=”10″ color=”” class=””]

[idz_spacer height=”3″ color=”#dedede” class=””]

[idz_spacer height=”10″ color=”” class=””]

[idz_col_full class=””]

[idz_heading tag=”h3″ class=” firstword-bold”]Example List Style[/idz_heading]

[/idz_col_full]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Disc List[/idz_heading]
[idz_code][idz_list type=”disc”]..[/idz_list][/idz_code]
[idz_list type=”disc”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Square List[/idz_heading]
[idz_code][idz_list type=”square”]..[/idz_list][/idz_code]
[idz_list type=”square”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]No Bullet List[/idz_heading]
[idz_code][idz_list type=”nobullet”]..[/idz_list][/idz_code]
[idz_list type=”nobullet”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

 

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Arrow List[/idz_heading]
[idz_code][idz_list type=”arrow”]..[/idz_list][/idz_code]
[idz_list type=”arrow”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Check List[/idz_heading]
[idz_code][idz_list type=”check”]..[/idz_list][/idz_code]
[idz_list type=”check”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Plus List[/idz_heading]
[idz_code][idz_list type=”plus”]..[/idz_list][/idz_code]
[idz_list type=”plus”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

 

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Star List[/idz_heading]
[idz_code][idz_list type=”star”]..[/idz_list][/idz_code]
[idz_list type=”star”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Pin List[/idz_heading]
[idz_code][idz_list type=”pin”]..[/idz_list][/idz_code]
[idz_list type=”pin”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]

[idz_col_13 class=”medium-4″]
[idz_heading tag=”h5″ subtext=”” class=”bold”]Flag List[/idz_heading]
[idz_code][idz_list type=”flag”]..[/idz_list][/idz_code]
[idz_list type=”flag”]

• List item
• List item
• List item

[/idz_list]
[/idz_col_13]