Blocks - Hero

Copy any custom block snippet below and paste it on your page to build your website easily.

Filter Blocks:

Click on the image to see the live demo of the hero example.

# Hero Section
hero:
  title: "Grow Your Business with Our Solutions."
  subtitle: "We help our clients to increase their website traffic, rankings and visibility in search results."
  button:
    label: "Try It For Free"
    url: "#"
  image: /assets/img/illustrations/i2.png
  image2x: /assets/img/illustrations/[email protected]

View include code

{% include components/sections/demo1/hero.html %}

View frontmatter code

# Hero Section
hero:
  title: "We bring solutions to make life easier for our customers."
  subtitle: "We have considered our solutions to support every stage of your growth."
  buttons:
    - label: "Explore Now"
      url: "#"
      class: "btn-lg btn-primary rounded-pill me-2"
    - label: "Free Trial"
      url: "#"
      class: "btn-lg btn-outline-primary rounded-pill"
  image: /assets/img/photos/about7.jpg
  image2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo2/hero.html %}

View frontmatter code

# Hero Section
    hero:
      bg_color: dark
      angled: true
      angled_position: lower-start
      title: "Sandbox focuses on 
"
      subtitle: "We carefully consider our solutions to support each and every stage of your growth."
      buttons:
        - label: "Get Started"
          url: "#"
          class: "btn-lg btn-primary rounded"
      video_url: /assets/media/movie.mp4
      image: /assets/img/photos/about13.jpg
      image2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo3/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Just sit & relax while we take care of your business needs."
      subtitle: "We make your spending stress-free for you to have the perfect control."
      buttons:
        - label: "Explore Now"
          url: "#"
          class: "btn btn-lg btn-primary rounded-pill me-2"
        - label: "Contact Us"
          url: "#"
          class: "btn btn-lg btn-outline-primary rounded-pill"
      image: /assets/img/photos/about16.jpg
      image_position: right
      min_height: min-vh-70

View include code

{% include components/sections/demo4/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Staying on top of your bills never been this easy"
      subtitle: "Easily achieve your saving goals. Have all your recurring and one time expenses and incomes in one place."
      buttons:
        - label: "Get Started"
          url: "#"
          class: "btn btn-primary rounded mx-1"
        - label: "Free Trial"
          url: "#"
          class: "btn btn-green rounded mx-1"

View include code

{% include components/sections/demo5/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Get all of your steps, exercise, sleep and meds in one place."
      subtitle: "Sandbox is now available to download from both the App Store and Google Play Store."
      buttons:
        - label: "App Store"
          url: "#"
          class: "btn btn-primary btn-icon btn-icon-start rounded me-2"
          icon: "uil uil-apple"
        - label: "Google Play"
          url: "#"
          class: "btn btn-green btn-icon btn-icon-start rounded"
          icon: "uil uil-google-play"
      image: /assets/img/photos/devices.png
      image2x: /assets/img/photos/[email protected]
      image_position: "top: -1%; left: -21%;"

View include code

{% include components/sections/demo6/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Creative. Smart. Awesome."
      subtitle: "We are an award winning web & mobile design agency that strongly believes in the power of creative ideas."
      buttons:
        - label: "See Projects"
          url: "#"
          class: "btn btn-lg btn-primary rounded-pill mx-1"
        - label: "Contact Us"
          url: "#"
          class: "btn btn-lg btn-outline-primary rounded-pill mx-1"
      image: /assets/img/illustrations/i12.png
      image2x: /assets/img/illustrations/[email protected]

View include code

{% include components/sections/demo7/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Crafting project specific solutions with expertise."
      subtitle: "We're a company that focuses on establishing long-term relationships with customers."
      buttons:
        - label: "Explore Now"
          url: "#"
          class: "btn btn-lg btn-primary rounded-pill me-2"
        - label: "Contact Us"
          url: "#"
          class: "btn btn-lg btn-outline-primary rounded-pill"
      image: /assets/img/photos/co3.png
      image2x: /assets/img/photos/[email protected]
      happy_clients:
        enable: true
        count: "25000+"
        text: "Happy Clients"

View include code

{% include components/sections/demo8/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title_html: "Sandbox is effortless and powerful with 
"
      subtitle: "Achieve your saving goals. Have all your recurring and one time expenses and incomes in one place."
      buttons:
        - label: "Get Started"
          url: "#"
          class: "btn btn-lg btn-primary rounded me-2"
        - label: "Free Trial"
          url: "#"
          class: "btn btn-lg btn-green rounded"
      gallery:
        - image: /assets/img/photos/sa20.jpg
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa18.jpg
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa16.jpg
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa21.jpg
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa19.jpg
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa17.jpg
          image2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo9/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "We bring solutions to make life easier"
      subtitle: "We are a creative company that focuses on long term relationships with customers."
      buttons:
        - label: "Read More"
          url: "#"
          class: "btn btn-lg btn-primary rounded mb-5"
      image: /assets/img/photos/about15.jpg
      image2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo10/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Crafting project specific solutions with expertise."
      subtitle: "We're a creative company that focuses on establishing long-term relationships with customers."
      buttons:
        - label: "Explore Now"
          url: "#"
          class: "btn btn-lg btn-white rounded-pill me-2"
        - label: "Contact Us"
          url: "#"
          class: "btn btn-lg btn-outline-white rounded-pill"
      background: /assets/img/photos/bg4.jpg
      slider:
        - image: /assets/img/photos/about21.jpg
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/about22.jpg
          image2x: /assets/img/photos/[email protected]
          video: /assets/media/movie.mp4
        - image: /assets/img/photos/about23.jpg
          image2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo11/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Creative. Smart. Awesome."
      subtitle: "We specialize in web, mobile and identity design. We love to turn ideas into beautiful things."
      buttons:
        - label: "See Projects"
          url: "#"
          class: "btn btn-primary rounded me-2"
        - label: "Learn More"
          url: "#"
          class: "btn btn-yellow rounded"
      image: /assets/img/illustrations/i6.png
      image2x: /assets/img/illustrations/[email protected]

View include code

{% include components/sections/demo12/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "We bring rapid solutions for your business"
      subtitle: "Hello! This is Sandbox"
      video_url: /assets/media/movie.mp4
      background: /assets/img/photos/bg2.jpg

View include code

{% include components/sections/demo13/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "We bring rapid solutions for your business."
      subtitle: "We are an award winning branding design agency that strongly believes in the power of creative ideas."
      button:
        label: "Learn More"
        url: "#"
        class: "more hover"
      image: /assets/img/photos/about18.jpg
      image2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo14/hero.html %}

View frontmatter code

# Hero Section
    hero:
      slides:
        - background: /assets/img/photos/bg7.jpg
          title: "We bring solutions to make life easier."
          subtitle: "We are a creative company that focuses on long term relationships with customers."
          button:
            label: "Read More"
            url: "#"
            class: "btn btn-lg btn-outline-white rounded-pill"
          position: left
          animation: true
        - background: /assets/img/photos/bg8.jpg
          title: "We are trusted by over a million customers."
          subtitle: "Here a few reasons why our customers choose us."
          video_url: /assets/media/movie.mp4
          position: center
          animation: true
        - background: /assets/img/photos/bg9.jpg
          title: "Just sit and relax."
          subtitle: "We make sure your spending is stress free so that you can have the perfect control."
          button:
            label: "Contact Us"
            url: "#"
            class: "btn btn-lg btn-outline-white rounded-pill"
          position: right
          animation: true

View include code

{% include components/sections/demo15/hero.html %}

View frontmatter code

# Hero Section
    hero:
      image: /assets/img/photos/about17.jpg
      image2x: /assets/img/photos/[email protected]
      card:
        icon: /assets/img/icons/lineal/check.svg
        count: "250+"
        text: "Projects Done"
      title: "I'm User Interface Designer & Developer."
      subtitle: "Hello! I'm Julia, a freelance user interface designer & developer based in London. I'm very passionate about the work that I do."
      buttons:
        - label: "See My Works"
          url: "#"
          class: "btn btn-lg btn-primary rounded-pill me-2"
        - label: "Contact Me"
          url: "#"
          class: "btn btn-lg btn-outline-primary rounded-pill"

View include code

{% include components/sections/demo16/hero.html %}

View frontmatter code

# Hero Section
    hero:
      subtitle: "Hello! This is Sandbox"
      title: "We bring rapid solutions for your business."
      buttons:
        - label: "Explore Now"
          url: "#"
          class: "btn btn-lg btn-primary rounded-pill me-2"
        - label: "Contact Us"
          url: "#"
          class: "btn btn-lg btn-outline-primary rounded-pill"
      background_image: /assets/img/photos/bg11.jpg

View include code

{% include components/sections/demo17/hero.html %}

View frontmatter code

# Hero Section
    hero:
      bg_image: "/assets/img/photos/bg22.png"
      overlay: "bg-overlay-light-500"
      title: "Networking solutions for worldwide communication"
      subtitle: "We're a company that focuses on establishing long-term relationships with customers."
      button:
        label: "Explore Now"
        url: "#"
        class: "btn btn-lg btn-gradient gradient-1 rounded"
      image: "/assets/img/illustrations/3d6.png"
      image2x: "/assets/img/illustrations/[email protected]"

View include code

{% include components/sections/demo18/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "We bring solutions to make life easier"
      subtitle: "We are a creative company that focuses on long term relationships with customers."
      buttons:
        - label: "Read More"
          url: "#"
          class: "btn btn-white rounded mb-10 mb-xxl-5"
      bg_image: /assets/img/photos/bg16.png
      bg_overlay: true
      bg_overlay_opacity: 300

View include code

{% include components/sections/demo19/hero.html %}

View frontmatter code

# Hero Section
    hero_video:
      poster: /assets/img/photos/movie2.jpg
      video_src: /assets/media/movie2.mp4
      title: "Rapid Solutions,Innovative Thinking,Top-Notch Support"
      subtitle: "We are a digital agency specializing in web design, mobile development and seo optimization."

View include code

{% include components/sections/demo20/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "A digital agency specializing on mobile design,web design,3D animation"
      subtitle: "We are an award winning design agency that strongly believes in the power of creative ideas."
      button:
        label: "Get Started"
        url: "#"
        class: "btn btn-lg btn-primary rounded-pill"
      image: /assets/img/illustrations/i21.png
      image2x: /assets/img/illustrations/[email protected]
      trust_text: "Trusted by over 2K+ clients across the world"

View include code

{% include components/sections/demo21/hero.html %}

View frontmatter code

# Hero Section
    hero:
      subtitle: "Hello! We are Sandbox"
      title: "Grow your business with our marketing solutions"
      video_btn:
        enable: true
        url: /assets/media/movie.mp4
      bg_image: /assets/img/photos/bg26.jpg

View include code

{% include components/sections/demo22/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "I'm Julia Sandbox"
      subtitle: "couples & wedding photographer"
      slides:
        - image: /assets/img/photos/bg28.jpg
          thumbnail: /assets/img/photos/bg28-th.jpg
          thumbnail2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/bg29.jpg
          thumbnail: /assets/img/photos/bg29-th.jpg
          thumbnail2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/bg30.jpg
          thumbnail: /assets/img/photos/bg30-th.jpg
          thumbnail2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/bg31.jpg
          thumbnail: /assets/img/photos/bg31-th.jpg
          thumbnail2x: /assets/img/photos/[email protected]

View include code

{% include components/sections/demo23/hero.html %}

View frontmatter code

# Home Section (Slider)
    home:
      enable: true 
      images:
        - img: /assets/img/photos/cf1.jpg
        - img: /assets/img/photos/cf2.jpg
        - img: /assets/img/photos/cf3.jpg
        - img: /assets/img/photos/cf4.jpg
        - img: /assets/img/photos/cf5.jpg
        - img: /assets/img/photos/cf6.jpg

View include code

{% include components/sections/demo24/hero.html %}

View frontmatter code

# Hero Slider Section
    hero_slider:
      enable: true

View include code

{% include components/sections/demo25/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "Grow Your Business with 
Our Marketing Solutions"
      subtitle: "We help our clients to increase their website 
 traffic, rankings and visibility in search results."
      buttons:
        - label: "Try it for Free"
          url: "#"
          class: "btn btn-lg btn-grape rounded"
        - label: "Explore Now"
          url: "#"
          class: "btn btn-lg btn-outline-grape rounded"
      image: /assets/img/illustrations/3d11.png
      image2x: /assets/img/illustrations/[email protected]
      bg_image: /assets/img/photos/clouds.png

View include code

{% include components/sections/demo26/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "We bring solutions to make life easier"
      subtitle: "We are a creative company that focuses on long term relationships with customers."
      button_text: "Read More"
      button_url: "#"
      image: /assets/img/photos/bg37.jpg

View include code

{% include components/sections/demo27/hero.html %}

View frontmatter code

# Hero Section
    hero:
      enable: true
      bg_class: "bg-gradient-blend"
      profile_image: /assets/img/photos/about28.jpg
      profile_image2x: /assets/img/photos/[email protected]
      greeting: "Hello! I'm Julia"
      title: "I'm a corporate brand designer based in New York City."
      content: "I'm very passionate about the work that I do, and if you are curious you can find my works on Dribbble, my portfolio on Behance, and my shots on Instagram."

View include code

{% include components/sections/demo28/hero.html %}

View frontmatter code

# Hero Section
    hero:
      bg_image: /assets/img/photos/bg23.png
      bg_overlay: bg-overlay-light-600
      title: "Manage all your bills, accounts and budgets in one place."
      subtitle: "Sandbox is available to download from both App Store and Google Play Store."
      device_image: /assets/img/photos/devices3.png
      device_image2x: /assets/img/photos/[email protected]
      store_buttons:
        - image: /assets/img/photos/button-appstore.svg
          url: "#"
        - image: /assets/img/photos/button-google-play.svg
          url: "#"
      doodles:
        - image: /assets/img/svg/doodle1.svg
          style: "top: -9%; left: -6%"
          class: "h-9"
        - image: /assets/img/svg/doodle2.svg
          style: "bottom: 9%; right: -22%"
          class: "h-15"

View include code

{% include components/sections/demo29/hero.html %}

View frontmatter code

# Hero Section
    hero:
      title: "We are a digital web agency specializing on 
web design.,SEO services.,e-commerce.,Google Adwords."
      subtitle: "We are an award winning digital web agency that strongly believes in the power of creative ideas."
      buttons:
        - label: "See Projects"
          url: "#"
          class: "btn btn-lg btn-primary rounded-xl mx-1"
        - label: "Contact Us"
          url: "#"
          class: "btn btn-lg btn-fuchsia rounded-xl mx-1"
      shapes:
        - name: "pie"
          color: "grape"
          position: "top: -5%; left: -15%;"
          size: "w-5"
          delay: 1500
        - name: "scribble"
          color: "violet"
          position: "bottom: 30%; left: -20%;"
          size: "w-10"
          delay: 1500
        - name: "tri"
          color: "fuchsia"
          position: "top: 0%; right: -25%; transform: rotate(70deg);"
          size: "w-6"
          delay: 1500
        - name: "circle"
          color: "yellow"
          position: "bottom: 25%; right: -17%;"
          size: "w-6"
          delay: 1500

View include code

{% include components/sections/demo30/hero.html %}

View frontmatter code

# Hero Section
    hero:
      bg_class: "wrapper"
      title: "We bring rapid solutions for your business"
      title_class: "display-1 ls-sm fs-64 mb-4 px-md-8 px-lg-0"
      text: "We are creative company that values quality and focuses on establishing long-term relationships with customers."
      text_class: "lead fs-24 lh-sm mb-7"
      button:
        label: "See Projects"
        url: "#"
        class: "btn btn-lg btn-primary rounded mb-10 mb-xxl-5"
      image: "/assets/img/illustrations/i28.png"
      image2x: "/assets/img/illustrations/[email protected]"
      divider: true
      divider_color: "text-soft-primary"

View include code

{% include components/sections/demo31/hero.html %}

View frontmatter code

# Hero Section
    hero:
      bg_class: "wrapper gradient-8 bg-lines"
      title_tag: "h2"
      title_class: "h6 text-uppercase ls-xl text-white mb-5"
      title: "Hello! We are Sandbox"
      main_title: "We have considered our solutions to assist every stage of your growth."
      main_title_class: "display-1 fs-68 lh-xxs mb-8 text-white"
      buttons:
        - label: "Explore Now"
          url: "#"
          class: "btn btn-lg btn-white"

View include code

{% include components/sections/demo32/hero.html %}

View frontmatter code

# Hero Section
    hero:
      wrapper_classes: "mx-xxl-11 overflow-hidden"
      background_image: "/assets/img/photos/bg23.png"
      has_shapes: true
      title: "👋 Hello! I'm  Camille, a product designer."
      subtitle: "I'm very passionate about the work that I do, and if you are curious you can find my works on Dribbble, my portfolio on Behance."
      button:
        text: "See My Works"
        url: "#"

View include code

{% include components/sections/demo33/hero.html %}

View frontmatter code

# Hero Section
    hero:
      background: bg-gradient-primary
      title: Create a powerful but effortless website for
      typed_text:
        - your business.
        - your portfolio.
        - your startup.
        - digital marketing.
      subtitle: Build your website in minutes with the help of countless amazing features of Sandbox.
      button:
        label: Check Demos
        url: "#demos"
        class: btn btn-lg btn-primary rounded-pill me-2 scroll
      images:
        - image: /assets/img/demos/vc1.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc2.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc3.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc4.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 0
        - image: /assets/img/demos/vc5.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 0
        - image: /assets/img/demos/vc6.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 0
        - image: /assets/img/demos/vc7.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc8.jpg
          image2x: /assets/img/demos/[email protected]
          delay: 900
      jquery_badge:
        enable: true
        position: bottom right
        text: NO jQuery

View include code

{% include components/sections/demo34/hero.html %}

Project Pages

Single Projects

Usage

Styleguide

Elements

Blocks - Hero

Filter Blocks: