Configuration

Note the page property hasHero: true and in the section configuration isFullScreen: true

---
hasHero: true
# other settings

sections:
  - sectionType: hero
    containerTag: section
    classes: 'first-section'
    id: ''
    description: "This is a full screen hero section with a background image and text overlay. The proporty 'isFullScreen' is set to true, which turn a standard hero section into full screen."
    isDisabled: false
    isReverse: false
    isAnimated: true
    isFullScreen: true
    targetId: 'first-section'
    date: ''
    author: ''
    containerFields:
      inContainer: false
      noMargin:
        top: true
        bottom: true
      noPadding:
        top: false
        bottom: false
      background:
        isDark: false
        color: ''
        image: '/assets/images/sample13.jpg'
        imageScreen: 'none' # light, dark, none
    text:
      leadIn: 'Metalsmith Components Library'
      title: Hero
      titleTag: 'h1'
      subTitle:
      prose: Examples of hero sections including full page. Click the down arrow at the bottom of the screen to scroll down. That requires 'targetId' to be set to the id of the next section, in this case 'first-section' and the id of the next section is set to 'first-section'. Also, notice the up-arrow in the bottom right screen corner, when scrolling starts, to return to the top of the page.
    ctas:
      - url: '/'
        label: 'go home'
        isButton: true
        buttonStyle: 'primary'
    image:
      src: ''
      alt: ''
      caption: ''

# other sections
---

Default Hero

In this case isFullScreen is set to false. Examples of a default hero can be seen on thehome page, Section Anatomy and From YAML to HTML

Configuration

- sectionType: hero
  containerTag: section
  classes: 'first-section'
  isFullScreen: false
  targetId: 'first-section'
  containerFields:
    inContainer: false
    background:
      isDark: false
      image: '/assets/images/sample13.jpg'
      imageScreen: 'none'
  text:
    leadIn: 'Metalsmith Components Library'
    title: Hero
    titleTag: 'h1'
    prose: Examples of hero sections including full page. Click the down arrow at the bottom to scroll down.
  ctas:
    - url: '/'
      label: 'go home'
      isButton: true
      buttonStyle: 'primary'

Configuration Options

Page Settings

PropertyTypeRequiredDescription
hasHerobooleanNoMust be true for breadcrumbs to be placed inside hero

Hero Layout

PropertyTypeRequiredDescription
isFullScreenbooleanNoEnable full-screen hero section (default: false)
targetIdstringNoID of section to scroll to when down arrow is clicked
isReversebooleanNoReverse the layout order

Content

PropertyTypeRequiredDescription
textobjectYesText content with leadIn, title, titleTag, subTitle, and prose
ctasarrayNoCall-to-action buttons
imageobjectNoOptional hero image with src, alt, and caption

Note: The targetId should be set to the id of the section to scroll to when the down arrow in the full-screen hero is clicked. Notice the up-arrow in the bottom right screen corner when scrolling starts, to return to the top of the page.