Hero

Créez des sections de pages d’accueil percutantes avec des bannières et arrière-plans hero.

Import

import { Hero } from 'asterui'

Exemples

Hero basique

Section hero simple avec titre et sous-titre.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero } from 'asterui'

function App() {
  return (
      <Hero contentClassName="text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Hello there</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
        </div>
      </Hero>
    )
}

export default App

Hero avec bouton CTA

Section hero avec un bouton d'appel à l'action.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero contentClassName="text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Hello there</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

Hero avec figure

Hero avec image latérale ou élément figure.

Box Office News!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero contentClassName="flex-col lg:flex-row-reverse">
        <img
          src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
          alt="Hero"
          className="max-w-sm rounded-lg shadow-2xl"
        />
        <div>
          <h1 className="text-5xl font-bold">Box Office News!</h1>
          <p className="py-6">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

Hero avec superposition d'arrière-plan

Hero avec image d'arrière-plan et effet de superposition.

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

import { Hero, Button } from 'asterui'

function App() {
  return (
      <Hero
        overlay
        contentClassName="text-center text-neutral-content"
        style={{
          backgroundImage: "url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
        }}
      >
        <div className="max-w-md">
          <h1 className="mb-5 text-5xl font-bold">Hello there</h1>
          <p className="mb-5">
            Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
            excepturi exercitationem quasi. In deleniti eaque aut repudiandae
            et a id nisi.
          </p>
          <Button color="primary">Get Started</Button>
        </div>
      </Hero>
    )
}

export default App

API

Propriété	Description	Type	Par défaut
`children`	Contenu du hero	`React.ReactNode`	-
`overlay`	Afficher l’effet de superposition (pour les images d’arrière-plan)	`boolean`	`false`
`contentClassName`	Classes CSS pour l’enveloppe du contenu	`string`	-
`className`	Classes CSS supplémentaires	`string`	-
`style`	Styles en ligne (utile pour les images d’arrière-plan)	`React.CSSProperties`	-

Accessibilité

Utilisez des éléments de titre sémantiques (h1, h2) pour les titres hero
Assurez un contraste de couleur suffisant entre le texte et l’arrière-plan
Fournissez un texte alternatif pour les images hero
Rendez les boutons CTA accessibles au clavier