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.

Code (index.md)

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

#title_page = true # Default is false
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"
+++

Particles (config.json)

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

Documentation

Extra Files

Hero fragment supports extra files to configure how it appears. Therefore you need to create a directory for the hero fragment and name your fragment index.md inside that directory.

Extra files can be provided for background, logo and particles effect configuration.

[hero]/config.json

If particles variable is set to true, a default configuration for the particles-js library will be used. You can customize this configuration by providing a config.json file inside the hero fragment’s directory.

Variables

title_page

type: boolean
default: false

If set to true and asset is not set, title will be the same as page title.

particles

type: boolean
default: false

If set to true, Particles.js would be added to the page and displayed in the Hero fragment.

minHeight

type: string
accepted values: css size values
default: initial

Sets minimum height of hero fragment.

type: asset object

Background image of the Hero fragment.

asset

type: asset object

The asset is displayed on the Hero fragment instead of the title and can be used to display a logo.

Note: If set, title will not be shown and subtitle will be displayed in a bigger size.

buttons

type: array of objects

Call to action buttons displayed after title or asset and subtitle.

Visit Buttons fragment page (documentation section) for documentation on which variables to use.

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