All themes

Sandbox Jekyll documentation

Hero

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

Example 1

# 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.webp
  image2x: /assets/img/illustrations/[email protected]
{% include components/sections/demo1/hero.html %}

Example 2

# 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.webp
  image2x: /assets/img/photos/[email protected]
{% include components/sections/demo2/hero.html %}

Example 3

# 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.webp
      image2x: /assets/img/photos/[email protected]
{% include components/sections/demo3/hero.html %}

Example 4

# 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.webp
      image_position: right
      min_height: min-vh-70
{% include components/sections/demo4/hero.html %}

Example 5

# 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"
{% include components/sections/demo5/hero.html %}

Example 6

# 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.webp
      image2x: /assets/img/photos/[email protected]
      image_position: "top: -1%; left: -21%;"
{% include components/sections/demo6/hero.html %}

Example 7

# 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.webp
      image2x: /assets/img/illustrations/[email protected]
{% include components/sections/demo7/hero.html %}

Example 8

# 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.webp
      image2x: /assets/img/photos/[email protected]
      happy_clients:
        enable: true
        count: "25000+"
        text: "Happy Clients"
{% include components/sections/demo8/hero.html %}

Example 9

# 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.webp
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa18.webp
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa16.webp
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa21.webp
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa19.webp
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/sa17.webp
          image2x: /assets/img/photos/[email protected]
{% include components/sections/demo9/hero.html %}

Example 10

# 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.webp
      image2x: /assets/img/photos/[email protected]
{% include components/sections/demo10/hero.html %}

Example 11

# 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.webp
      slider:
        - image: /assets/img/photos/about21.webp
          image2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/about22.webp
          image2x: /assets/img/photos/[email protected]
          video: /assets/media/movie.mp4
        - image: /assets/img/photos/about23.webp
          image2x: /assets/img/photos/[email protected]
{% include components/sections/demo11/hero.html %}

Example 12

# 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.webp
      image2x: /assets/img/illustrations/[email protected]
{% include components/sections/demo12/hero.html %}

Example 13

# 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.webp
{% include components/sections/demo13/hero.html %}

Example 14

# 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.webp
      image2x: /assets/img/photos/[email protected]
{% include components/sections/demo14/hero.html %}

Example 15

# Hero Section
    hero:
      slides:
        - background: /assets/img/photos/bg7.webp
          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.webp
          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.webp
          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
{% include components/sections/demo15/hero.html %}

Example 16

# Hero Section
    hero:
      image: /assets/img/photos/about17.webp
      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"
{% include components/sections/demo16/hero.html %}

Example 17

# 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.webp
{% include components/sections/demo17/hero.html %}

Example 18

# Hero Section
    hero:
      bg_image: "/assets/img/photos/bg22.webp"
      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.webp"
      image2x: "/assets/img/illustrations/[email protected]"
{% include components/sections/demo18/hero.html %}

Example 19

# 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.webp
      bg_overlay: true
      bg_overlay_opacity: 300
{% include components/sections/demo19/hero.html %}

Example 20

# Hero Section
    hero_video:
      poster: /assets/img/photos/movie2.webp
      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."
{% include components/sections/demo20/hero.html %}

Example 21

# 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.webp
      image2x: /assets/img/illustrations/[email protected]
      trust_text: "Trusted by over 2K+ clients across the world"
{% include components/sections/demo21/hero.html %}

Example 22

# 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.webp
{% include components/sections/demo22/hero.html %}

Example 23

# Hero Section
    hero:
      title: "I'm Julia Sandbox"
      subtitle: "couples & wedding photographer"
      slides:
        - image: /assets/img/photos/bg28.webp
          thumbnail: /assets/img/photos/bg28-th.webp
          thumbnail2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/bg29.webp
          thumbnail: /assets/img/photos/bg29-th.webp
          thumbnail2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/bg30.webp
          thumbnail: /assets/img/photos/bg30-th.webp
          thumbnail2x: /assets/img/photos/[email protected]
        - image: /assets/img/photos/bg31.webp
          thumbnail: /assets/img/photos/bg31-th.webp
          thumbnail2x: /assets/img/photos/[email protected]
{% include components/sections/demo23/hero.html %}

Example 24

# Home Section (Slider)
    home:
      enable: true 
      images:
        - img: /assets/img/photos/cf1.webp
        - img: /assets/img/photos/cf2.webp
        - img: /assets/img/photos/cf3.webp
        - img: /assets/img/photos/cf4.webp
        - img: /assets/img/photos/cf5.webp
        - img: /assets/img/photos/cf6.webp
{% include components/sections/demo24/hero.html %}

Example 25

# Hero Slider Section
    hero_slider:
      enable: true
{% include components/sections/demo25/hero.html %}

Example 26

# 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.webp
      image2x: /assets/img/illustrations/[email protected]
      bg_image: /assets/img/photos/clouds.webp
{% include components/sections/demo26/hero.html %}

Example 27

# 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.webp
{% include components/sections/demo27/hero.html %}

Example 28

# Hero Section
    hero:
      enable: true
      bg_class: "bg-gradient-blend"
      profile_image: /assets/img/photos/about28.webp
      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."
{% include components/sections/demo28/hero.html %}

Example 29

# Hero Section
    hero:
      bg_image: /assets/img/photos/bg23.webp
      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.webp
      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"
{% include components/sections/demo29/hero.html %}

Example 30

# 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
{% include components/sections/demo30/hero.html %}

Example 31

# 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.webp"
      image2x: "/assets/img/illustrations/[email protected]"
      divider: true
      divider_color: "text-soft-primary"
{% include components/sections/demo31/hero.html %}

Example 32

# 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"
{% include components/sections/demo32/hero.html %}

Example 33

# Hero Section
    hero:
      wrapper_classes: "mx-xxl-11 overflow-hidden"
      background_image: "/assets/img/photos/bg23.webp"
      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: "#"
{% include components/sections/demo33/hero.html %}

Example 34

# 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.webp
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc2.webp
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc3.webp
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc4.webp
          image2x: /assets/img/demos/[email protected]
          delay: 0
        - image: /assets/img/demos/vc5.webp
          image2x: /assets/img/demos/[email protected]
          delay: 0
        - image: /assets/img/demos/vc6.webp
          image2x: /assets/img/demos/[email protected]
          delay: 0
        - image: /assets/img/demos/vc7.webp
          image2x: /assets/img/demos/[email protected]
          delay: 900
        - image: /assets/img/demos/vc8.webp
          image2x: /assets/img/demos/[email protected]
          delay: 900
      jquery_badge:
        enable: true
        position: bottom right
        text: NO jQuery
{% include components/sections/demo34/hero.html %}

Sign In

Please enter your credentials to continue.

Email

Password

Sign In

Forgot your password?

Don’t have an account? Sign up

or

Create Account

Create your account to get started.

Name

Email

Password

Confirm Password

Create Account

Already have an account? Sign in

or