The Hero component in Axcora SSG provides a flexible, visually prominent section for highlighting key messages, calls-to-action, or feature introductions. You can use hero components in templates as well as Markdown article content, making it ideal for headlines, landing pages, or any content that benefits from strong first impressions.

installation

npm i axcora-hero
or hero with button
npm i axcora-hero-button

1. Enabling the Hero Component

To enable the hero component in a template, import it in your template’s front-matter, such as in templates/blog/single.axcora:

---
layouts: base
css:
  theme: 'essentials'
  components:
    - hero
---
<main>{{content}}</main>

Once imported, hero sections become available in both Markdown and template files.

2. Usage Examples

Simple Hero

{% axcora-hero title="Title" text="Content in here" /%}

Output:

Hero with Buttons

{% axcora-hero-button title="Hero with button Title" text="Content Hero with button in here" button1="Get Started" button1_color="primary" button1_url="/start" button2="Learn More" button2_color="warning" button2_url="/learn" /%}

Output:

3. Properties

4. CSS Styling

The hero component uses a modern, gradient background with responsive, centered content:

.hero {
  position: relative;
  padding: calc(var(--spacing-2xl) * 2) var(--spacing-xl);
  background: linear-gradient(135deg, var(--i300), var(--p500), var(--p700));
  color: white;
  text-align: center;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.3;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: var(--spacing-lg);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: var(--spacing-xl);
  opacity: 0.95;
}
.hero-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
}

• Responsive layout ensures hero sections look good on any device.
• Supports clear, legible text and flexible layouts for both minimalist and action-driven hero areas.

5. Best Practices

• Keep titles concise and expressive for maximum impact.
• Pair with call-to-action buttons to drive user engagement, such as “Get Started” or “Learn More.”
• Avoid clutter: Use the hero area for your most important message or actions.
• Test across devices to ensure your hero section remains visually prominent and accessible.

6. Summary Table

The Axcora Hero component is designed to put your brand or message front-and-center with modern design and easy configurability, making it a strong foundation for landing pages, headers, or promotional content.