Hero

Showcase your logo, header and most important call to actions

Hero fragment can be used in your website’s landing page or as first call to action on various sub pages. It can display a logo/image, title, subtitle and various call to action buttons. Additionally a background image can be configured or particleJS can be enabled.

Hero fragment has support for image resource fallthrough.

Showcase your next project

Button
Download
Button

Code

+++
fragment = "hero"
#disabled = true
date = "2016-09-07"
weight = 110
background = "secondary"
particles = true

title = "Syna Theme"
subtitle = "Showcase your next project"

[header]
  image = "header.jpg"

[asset]
  image = "logo.svg"
  width = "500px" # optional - will default to image width
  #height = "150px" # optional - will default to image height

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

[[buttons]]
  text = "Download"
  url = "https://github.com/okkur/syna/releases"
  color = "primary"

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