Back to top

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"
+++

Buttons Fragment with Icons

Call to action buttons with icons
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 = "#"
  icon = "fas fa-star"

[[buttons]]
  url = "#"
  icon = "" # Defaults to "fas fa-check" if "".

+++

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.

buttons.icon

type: string
accepted values: stylesheet classes such as “fas fa-check”, “fab fa-linkedin”, etc
default: Defaults to “fas fa-check” if and only if the parameter is present and the value is “"

Icons to be displayed if it is defined. Must be an icon style using Font Awsome icons.

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