Arc HeroArc Hero
HeroText and ImageVideo Capable
← Back to Sections

Arc Hero

A striking hero section featuring elegant curved image layouts and professional typography controls. Perfect for creating impactful landing pages with visual flair.

Key Features:

  • Two strategically positioned images with distinctive curved borders and video support
  • Rich text controls for captions and headings with responsive font sizing
  • Professional button styling with customizable colors, padding, and hover effects
  • Theme color scheme integration with optional custom color overrides
  • Image and video opacity controls for perfect visual balance
  • Mobile-optimized design that stacks content vertically on smaller screens
  • Background image support with positioning controls

Perfect for: Landing pages, product showcases, brand introductions, call-to-action sections, or any hero content that needs to make a strong visual impact.

{%- style -%}
.section-{{ section.id }} {
  {% if section.settings.use_custom_colors %}
    background-color: {{ section.settings.background_color }};
    color: {{ section.settings.text_color }};
  {% else %}
    color: rgb(var(--color-foreground));
  {% endif %}
  {% if section.settings.background_image != blank %}
    background-image: url({{ section.settings.background_image | img_url: 'original' }});
    background-size: cover;
    background-position-y: {{ section.settings.background_image_vertical_position }}%;
  {% endif %}
  border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.top_border_color }};
  border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.bottom_border_color }};
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

@media screen and (max-width: 767px) {
  .section-{{ section.id }} {
    padding-bottom: 0px !important;
  }
}

.section-{{ section.id }} .bc-hero-container {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 750px;
  padding-left: 80px;
  padding-right: 80px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-{{ section.id }} .bc-hero-content {
  position: absolute;
  left: 10%;
  z-index: 2;
}

.section-{{ section.id }} .bc-caption * {
  font-size: clamp({{ section.settings.caption_size | times: section.settings.mobile_scale_ratio }}rem, 4vw, {{ section.settings.caption_size }}rem) !important;
  line-height: {{ section.settings.caption_line_height }};
  margin-bottom: 1rem;
  max-width: {{ section.settings.caption_max_width }}ch;
  color: inherit;
}

.section-{{ section.id }} .bc-heading * {
  text-align: left;
  line-height: {{ section.settings.heading_line_height }};
  margin-top: 30px;
  max-width: {{ section.settings.heading_max_width }}ch;
  font-size: clamp({{ section.settings.heading_size | times: section.settings.mobile_scale_ratio }}rem, 5vw, {{ section.settings.heading_size }}rem) !important;
  color: inherit;
}

.section-{{ section.id }} .bc-image-1 {
  position: absolute;
  top: 50%;
  right: 40%;
  z-index: 0;
  width: 610px;
  height: 640px;
  border-top-left-radius: 100%;
  border-top-right-radius: 101%;
  transform: translate(50%, -50%);
  object-fit: cover;
  opacity: {{ section.settings.image_1_opacity }}%;
}

.section-{{ section.id }} .bc-image-2 {
  position: absolute;
  top: 35%;
  right: 10%;
  z-index: 1;
  width: 335px;
  height: 370px;
  object-fit: cover;
  opacity: {{ section.settings.image_2_opacity }}%;
}

{% if section.settings.video_1 != blank %}
.section-{{ section.id }} .bc-video-1 {
  position: absolute;
  top: 50%;
  right: 40%;
  z-index: 0;
  width: 610px;
  height: 640px;
  border-top-left-radius: 100%;
  border-top-right-radius: 101%;
  transform: translate(50%, -50%);
  object-fit: cover;
  opacity: {{ section.settings.video_1_opacity }}%;
}
{% endif %}

{% if section.settings.video_2 != blank %}
.section-{{ section.id }} .bc-video-2 {
  position: absolute;
  top: 35%;
  right: 10%;
  z-index: 1;
  width: 335px;
  height: 370px;
  object-fit: cover;
  opacity: {{ section.settings.video_2_opacity }}%;
}
{% endif %}

{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
  background-color: {{ section.settings.button_background_color }};
  color: {{ section.settings.button_text_color }};
  padding: {{ section.settings.button_padding_vertical }}px {{ section.settings.button_padding_horizontal }}px;
  border-radius: {{ section.settings.button_border_radius }}px;
  border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
  margin-top: {{ section.settings.button_top_margin }}rem;
}

.section-{{ section.id }} .bc-button:hover {
  background-color: {{ section.settings.button_hover_background_color }};
  color: {{ section.settings.button_hover_text_color }};
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
{% endif %}

@media screen and (max-width: 991px) {
  .section-{{ section.id }} .bc-image-2 {
    right: 5%;
  }

  .section-{{ section.id }} .bc-hero-content {
    left: 5%;
  }
}

@media screen and (max-width: 767px) {
  .section-{{ section.id }} .bc-hero-container {
    min-height: auto;
  }

  .section-{{ section.id }} .bc-image-1 {
    position: static;
    height: 600px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform: translate(0%, 0%);
    margin-top: 60px;
  }

  .section-{{ section.id }} .bc-image-2 {
    display: none;
  }

  .section-{{ section.id }} .bc-hero-content {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .section-{{ section.id }} .bc-heading * {
    text-align: center;
  }
}

@media screen and (max-width: 479px) {
  .section-{{ section.id }} .bc-hero-container {
    padding: 45px 25px;
  }

  .section-{{ section.id }} .bc-image-1 {
    width: 100%;
    height: 300px;
  }

  .section-{{ section.id }} .bc-hero-content {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}
{%- endstyle -%}

<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
  <div class="bc-hero-container">
    <div class="bc-hero-content">
      <div class="bc-caption">{{ section.settings.caption | default: 'Add your caption here' }}</div>
      <div class="bc-heading">{{ section.settings.heading | default: '<h1>Your Heading Here</h1>' }}</div>
      {% if section.settings.button_text != blank %}
        <a href="{{ section.settings.button_link | default: '#' }}" 
           class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button{% endif %}">
          {{ section.settings.button_text | default: 'Click me' }}
        </a>
      {% endif %}
    </div>
    
    {% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
    
    {% if section.settings.video_1 != blank %}
      {{ section.settings.video_1 | video_tag: 
        controls: false, 
        autoplay: true, 
        loop: true, 
        muted: true, 
        preload: "auto",
        class: "bc-video-1",
        sizes: "(max-width: 479px) 90vw, (max-width: 767px) 80vw, 610px"
      }}
    {% elsif section.settings.image_1 != blank %}
      <img src="{{ section.settings.image_1 | image_url: width: 3000 }}" 
           sizes="(max-width: 479px) 90vw, (max-width: 767px) 80vw, 610px" 
           alt="{{ section.settings.image_1_alt | default: '' }}" 
           class="bc-image-1" 
           {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% else %}loading="eager"{% endif %}>
    {% endif %}

    {% if section.settings.video_2 != blank %}
      {{ section.settings.video_2 | video_tag: 
        controls: false, 
        autoplay: true, 
        loop: true, 
        muted: true, 
        preload: "auto",
        class: "bc-video-2",
        sizes: "(max-width: 479px) 90vw, (max-width: 767px) 83vw, 335px"
      }}
    {% elsif section.settings.image_2 != blank %}
      <img src="{{ section.settings.image_2 | image_url: width: 3000 }}" 
           sizes="(max-width: 479px) 90vw, (max-width: 767px) 83vw, 335px" 
           alt="{{ section.settings.image_2_alt | default: '' }}" 
           class="bc-image-2" 
           {% if section.settings.image_loading == 'lazy' %}loading="lazy"{% else %}loading="eager"{% endif %}>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "BC Arc Hero",
  "settings": [
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color Scheme",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "use_custom_colors",
      "label": "Use custom colors",
      "default": false
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "top_border_color",
      "label": "Top Border Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "bottom_border_color",
      "label": "Bottom Border Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_background_color",
      "label": "Button Background Color",
      "default": "#DFF799"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_hover_background_color",
      "label": "Button Hover Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_hover_text_color",
      "label": "Button Hover Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button Border Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Section Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Padding Top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 40
    },
    {
      "type": "range",
      "id": "top_border_thickness",
      "label": "Top Border Thickness",
      "min": 0,
      "max": 30,
      "step": 1,
      "default": 0,
      "unit": "px",
      "info": "Set to 0 to hide border"
    },
    {
      "type": "range",
      "id": "bottom_border_thickness",
      "label": "Bottom Border Thickness",
      "min": 0,
      "max": 30,
      "step": 1,
      "default": 0,
      "unit": "px",
      "info": "Set to 0 to hide border"
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "richtext",
      "id": "caption",
      "label": "Caption",
      "default": "<p>Add your caption here</p>"
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "Heading",
      "default": "<h1>Your Heading Here</h1>"
    },
    {
      "type": "range",
      "id": "caption_size",
      "label": "Caption Font Size",
      "min": 0.5,
      "max": 3,
      "step": 0.1,
      "default": 1,
      "unit": "rem",
      "info": "Font size in rem units (good for accessibility)"
    },
    {
      "type": "range",
      "id": "caption_line_height",
      "label": "Caption Line Height",
      "min": 1,
      "max": 2,
      "step": 0.1,
      "default": 1.4
    },
    {
      "type": "range",
      "id": "caption_max_width",
      "label": "Caption Max Width",
      "min": 10,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "ch"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading Font Size",
      "min": 1,
      "max": 8,
      "step": 0.1,
      "default": 3.5,
      "unit": "rem",
      "info": "Font size in rem units (good for accessibility)"
    },
    {
      "type": "range",
      "id": "heading_line_height",
      "label": "Heading Line Height",
      "min": 1,
      "max": 2,
      "step": 0.1,
      "default": 1.2
    },
    {
      "type": "range",
      "id": "heading_max_width",
      "label": "Heading Max Width",
      "min": 10,
      "max": 100,
      "step": 1,
      "default": 30,
      "unit": "ch"
    },
    {
      "type": "range",
      "id": "mobile_scale_ratio",
      "label": "Mobile Scale Ratio",
      "min": 0.5,
      "max": 1,
      "step": 0.1,
      "default": 0.8,
      "unit": "Γ—",
      "info": "Controls how much the font shrinks on smaller screens"
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Image 1"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "Image 2"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image",
      "info": "Recommended width 2200px"
    },
    {
      "type": "video",
      "id": "video_1",
      "label": "Video 1",
      "info": "Upload a video file to replace Image 1"
    },
    {
      "type": "video",
      "id": "video_2",
      "label": "Video 2",
      "info": "Upload a video file to replace Image 2"
    },
    {
      "type": "text",
      "id": "image_1_alt",
      "label": "Image 1 Alt Text",
      "info": "Describe the image for accessibility"
    },
    {
      "type": "text",
      "id": "image_2_alt",
      "label": "Image 2 Alt Text",
      "info": "Describe the image for accessibility"
    },
    {
      "type": "range",
      "id": "image_1_opacity",
      "label": "Image 1 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "image_2_opacity",
      "label": "Image 2 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "video_1_opacity",
      "label": "Video 1 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "video_2_opacity",
      "label": "Video 2 Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "background_image_vertical_position",
      "label": "Background Image Vertical Position",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "image_loading",
      "label": "Image Loading",
      "options": [
        { "value": "lazy", "label": "Lazy" },
        { "value": "eager", "label": "Eager" }
      ],
      "default": "lazy",
      "info": "Lazy load for images below the fold, eager for above-the-fold images"
    },
    {
      "type": "header",
      "content": "Buttons"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "placeholder": "Click me"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "text",
      "id": "theme_button_class",
      "label": "Theme button class",
      "info": "Enter your theme's main button class if it's not 'button'",
      "placeholder": "e.g. btn btn--primary"
    },
    {
      "type": "checkbox",
      "id": "use_custom_button_style",
      "label": "Use custom button styling",
      "info": "Enable this to apply custom styles to this section's buttons",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "use_theme_button_class",
      "label": "Use theme button styling",
      "info": "Only enable this if your theme uses a different class than 'button' for its primary buttons",
      "default": false
    },
    {
      "type": "range",
      "id": "button_padding_horizontal",
      "label": "Button Padding - Horizontal",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 40,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_padding_vertical",
      "label": "Button Padding - Vertical",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 8,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "label": "Button Border Radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 0,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "button_border_width",
      "label": "Button Border Width",
      "min": 0,
      "max": 12,
      "step": 1,
      "default": 0,
      "unit": "px",
      "info": "Set to 0 to hide border"
    },
    {
      "type": "range",
      "id": "button_top_margin",
      "label": "Button Top Margin",
      "min": 0,
      "max": 5,
      "default": 1,
      "unit": "rem"
    }
  ],
  "presets": [
    {
      "name": "BC Arc Hero"
    }
  ]
}
{% endschema %}