Back to top

Buttons

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

Buttons Fragment

Call to action buttons
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
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.