HeroSection

<bh-hero-section> | BharatHeroSection

The bh-hero-section component provides a customizable hero section with various layouts, backgrounds, and styling options that match the Bharat UI design system. Perfect for creating impactful landing pages and introductory sections.

Open in

New

Introducing BharatUI for developers →

Transform Your Designs with BharatUI

BharatUI brings components, not complexity.

Basic Usage

Open in

New

Introducing BharatUI for developers →

Transform Your Designs with BharatUI

BharatUI brings components, not complexity.

<bh-hero-section
  bg-color="#0f172a"
  image-url="https://iili.io/3E9XcCu.md.png"
  header-color="white"
  text-color="#cbd5e1">
  <div slot="announcement" style="display: flex; align-items: center; background: #343436;color:rgb(255, 255, 255); padding:0.6em 0.6em; border-radius:9999px; font-size:0.75rem; margin-right:0.5em;">
    <span style="background:#e4e6eb; color:rgb(18, 16, 16); padding:0.2em 0.6em; border-radius:9999px; font-size:0.75rem; margin-right:0.5em;">
      New
    </span>
    Introducing BharatUI for developers →
  </div>
  <span slot="header">Transform Your Designs with BharatUI</span>
  <span slot="paragraph" style="color: white;">
    BharatUI brings components, not complexity.
  </span>
  <bh-button size="medium" class="btn btn-primary" slot="buttons" href="https://www.youtube.com/@Bharat_UI" variant="link"
    color="black" hover-color="gray" style="padding: 6px 20px; background-color: white; border-radius: 8px;">
    Follow us on Youtube
  </bh-button>
  <bh-button size="medium" class="btn btn-primary" slot="buttons" href="https://x.com/bharatui" variant="link"
    color="black" hover-color="gray" style="padding: 6px 20px; background-color: white; border-radius: 6px;">
    Follow us on twitter
  </bh-button>
</bh-hero-section>

import React from 'react';
import { BharatHeroSection} from 'bharat-ui/react/components/herosection';
import { BharatButton} from 'bharat-ui/react/components/button';
function App() {
return (
  <BharatHeroSection
  bg-color="#0f172a"
  image-url="https://iili.io/3E9XcCu.md.png"
  header-color="white"
  text-color="#cbd5e1">
  <div slot="announcement" style="display: flex; align-items: center; background: #343436;color:rgb(255, 255, 255); padding:0.6em 0.6em; border-radius:9999px; font-size:0.75rem; margin-right:0.5em;">
    <span style="background:#e4e6eb; color:rgb(18, 16, 16); padding:0.2em 0.6em; border-radius:9999px; font-size:0.75rem; margin-right:0.5em;">
      New
    </span>
    Introducing BharatUI for developers →
  </div>
  <span slot="header">Transform Your Designs with BharatUI</span>
  <span slot="paragraph" style="olor: white;">
    BharatUI brings components, not complexity.
  </span>
  <BharatButton size="medium" class="btn btn-primary" slot="buttons" href="https://www.youtube.com/@Bharat_UI" variant="link"
    color="black" hover-color="gray" style="padding: 6px 20px; background-color: white; border-radius: 8px;">
    Follow us on Youtube
  </BharatButton>
  <BharatButton size="medium" class="btn btn-primary" slot="buttons" href="https://x.com/bharatui" variant="link"
    color="black" hover-color="gray" style="padding: 6px 20px; background-color: white; border-radius: 6px;">
    Follow us on twitter
  </BharatButton>
</BharatHeroSection>

  );
}
export default App;

Properties

Property	Type	Description
`bg-color`	`string`	Background color of the hero section. Can be overridden by a background image.
`header-color`	`string`	Text color for the main header slot content.
`text-color`	`string`	Text color for the paragraph/description content.
`image-url`	`string`	URL of the background image to be used in the hero section. Overrides `bg-color`.

Named Slots

Slot Name	Description
`announcement`	Optional. Displays a banner-style notice or CTA above the header.
`header`	The main headline text of the hero section.
`paragraph`	Supporting text below the header.
`buttons`	Slot for one or more call-to-action buttons.
`logotitle`	Small label shown before the logo grid (e.g., “As featured on”).
`logos`	Logo grid display (e.g., brand icons or partner badges).