---
title: Hero Banner
description: Hero Banner
---

[strutoCX - Theme Documentation ](https://www.struto.io/strutocx-theme-documentation)

# [Hero Banner](https://www.struto.io/strutocx-theme-documentation/modules-hero-banner)

 Written by [Anders Grové](https://www.struto.io/strutocx-theme-documentation/author/anders-grové) | Mar 28, 2025 2:51:28 PM

#### Hero Banner

 

 

###### Module Description:

The Hero Banner module allows you to create a striking first impression with a full-width banner image or background. It's typically used at the top of a page to highlight key messages or calls to action.

 

 

###### Module Resources:

| Module Resources |   |
| --- | --- |
| CSS | hero-banner.css (located in /modules/hero-banner-module) |
| JS | None required for this module. |

 

 

 

###### Module Demo:

 

 

 

 

 

[View full post](https://www.struto.io/strutocx-theme-documentation/modules-hero-banner)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Anders Grové"
  },
  "dateModified" : "2025-04-07T17:04:37.550Z",
  "datePublished" : "2025-03-28T14:51:28Z",
  "headline" : "Hero Banner",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.struto.io/strutocx-theme-documentation/modules-hero-banner",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "strutoCX - Theme Documentation"
  }
}
```