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.
+++
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": {
"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
}
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.
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.
type: boolean
default: false
If set to true and asset is not set, title will be the same as page title.
type: boolean
default: false
If set to true, Particles.js would be added to the page and displayed in the Hero fragment.
type: string
accepted values: css size values
default: initial
Sets minimum height of hero fragment.
type: asset object
Background image of the Hero fragment.
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.
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.
Highly customizable open source theme for Hugo based static websites
