Buttons

Flexible call to action buttons making external or on site links actionable.

Buttons Fragment

Call to action buttons

Button Long Button Button Button Long Button Button Button Long Button

Code

+++
fragment = "buttons"
#disabled = false
date = "2016-09-07"
weight = 110
background = "secondary"

title = "Buttons Fragment"
#subtitle = ""
#title_align = "left" # Default is center, can be left, right or center

[[buttons]]
  text = "Button"
  url = "#"
  color = "secondary" # primary, secondary, success, danger, warning, info, light, dark, link - default: primary

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "success"

[[buttons]]
  text = "Button"
  url = "#"
  color = "danger"

[[buttons]]
  text = "Button"
  url = "#"
  color = "warning"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "info"

[[buttons]]
  text = "Button"
  url = "#"
  color = "light"

[[buttons]]
  text = "Button"
  url = "#"
  color = "dark"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "link"
+++

Buttons Fragment Outlined

Buttons with outlines

Button Long Button Button Button Long Button Button Button Long Button

Code

+++
fragment = "buttons"
#disabled = false
date = "2016-09-07"
weight = 120
background = "secondary"

title = "Buttons Fragment Outlined"
subtitle = "Buttons with outlines"
#title_align = "left" # Default is center, can be left, right or center

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-secondary" # primary, secondary, success, danger, warning, info, light, dark, link - default: primary

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "outline-success"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-danger"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-warning"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "outline-info"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-light"

[[buttons]]
  text = "Button"
  url = "#"
  color = "outline-dark"

[[buttons]]
  text = "Long Button"
  url = "#"
  color = "outline-link"
+++

Documentation

Variables

buttons

type: array of objects

You can add as many buttons as you want.

buttons.text

type: string
required

Title of the call to action button.

buttons.url

type: string
default: “#"

URL of the call to action button.

buttons.color

type: string
accepted values: (outline-)primary, secondary, success, danger, warning, info, light, dark
default: “primary”

Color class of the button, based on Bootstrap classes.

Global variables are documented as well and have been omitted from this page.

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites