Hero Section

The Hero section is used to display bold, fullwidth (or full-height) background image sections. This section can contain headlines, text, buttons and an additional thumbnail image.


Hero Section 1 Screenshot Hero section with background image, using blend mode into primary color background.

Hero Section 2 Screenshot Hero section without background image, using base color background. Using buttons and thumbnail image.

Section Front-matter

- template: hero # http://localhost:1313/docs/hugo-paradigm/page-builder/sections/hero/
    paddingTop: false # true/false
    paddingBottom: false # true/false
    borderTop: false # true/false
    borderBottom: false # true/false
    theme: primary # "base", "base-offset", "primary", "primary-offset" - Uses color variables from `data/themes.json` to theme the section
    classes: "custom-hero-section super-hero" # "my-class my-class-2" - Add custom classes to the section div for custom CSS styling
  alignHorizontal: left # "left", "right" - Aligns the text and image 
  alignVertical: "" # "top", "middle", "bottom" - Aligns the text and image 
  height: 600px # 800px, "auto" - Specify a height for the hero section, otherwise it will fit the content
  headings: # set a heading
    heading: Design Websites In Minutes
    subHeading: Fast, secure and easy to maintain
    text: ""
    headingColorCustom: "" # "#FFCC00" - Override the default colors with your own color code
    subHeadingColorCustom: "#28ffcf"
    textColorCustom: ""
  background: # set a background image
    backgroundImage: "/images/bantersnaps-5U_28ojjgms-unsplash-2000.jpg" # "/images/my-background-image.jpg" - Path to image
    opacity: 1 # 0 to 1 - Set a lower opacity to blend the background image into the background color, useful if the headings are difficult to read over the top of the image
    monotone: true # true/false - Blends the background image into the background color using preset blend mode filters, looks cool in some cases
    backgroundColorCustom: # "#FFCC00" - Override the background color with your own color code
  image: # set a foreground (thumbnail) image
    image: "" # "/images/my-image.jpg" - Path to image
    shadow: false # true/false - Add a shadow to the image
    border: false # true/false - Add a border to the image
    overlap: false # true/false - Have the image overlap the section below (position absolute), looks cool in some cases
  buttons: # add buttons
  - button: 
    text: Page Builder Documentation # "Read More" - Text on the button
    external: true # true/false - Use when linking to other websites, the button will open in a new window
    url: https://hugo-paradigm.netlify.app/docs/hugo-paradigm/page-builder/using-the-page-builder/ 
    buttonTheme: base # "base", "primary"