daisyUI Kit 🌼

Hero

Hero is a component for displaying a large box or image with a title and description. There are three components Hero, HeroContent, and HeroOverlay.

Hello There!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
Code Example 
<Hero class="h-[32rem]">
  <HeroContent>
    <Text is="div" center class="max-w-md">
      <Text is="h1" size="5xl" bold>
        Hello There!
      </Text>
      <Text is="div" class="py-6">
        Provident cupiditate voluptatem et in. Quaerat fugiat ut
        assumenda excepturi exercitationem quasi. In deleniti
        eaque aut repudiandae et a id nisi.
      </Text>
      <Button primary>
        Get Started
      </Button>
    </Text>
  </HeroContent>
</Hero>

Components

The Hero components include the following:

Hero

Wraps the other components. It supports the same props as Text

HeroContent

HeroContent is the container for content. It supports the same props as Text

HeroOverlay

HeroOverlay provides an overlay that covers the background image. It does not have any props.

With 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.

Code Example 
<Hero class="h-[32rem]">
  <HeroContent class="flex-col sm:flex-row">
    <img
      src="https://api.lorem.space/image/movie?w=260&h=400"
      class="max-w-sm rounded-lg shadow-2xl"
    >
    <div class="md:ml-4">
      <Text size="5xl" bold>
        Box Office News!
      </Text>
      <Text is="p" class="py-6">
        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
        excepturi exercitationem quasi. In deleniti eaque aut repudiandae
        et a id nisi.
      </Text>
      <Button primary>
        Get Started
      </Button>
    </div>
  </HeroContent>
</Hero>

With Form

Login now!

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

Code Example 
<Hero class="h-[32rem]">
  <HeroContent class="flex-col lg:flex-row-reverse">
    <Text is="div" center class="lg:text-left">
      <h1 class="text-5xl font-bold">
        Login now!
      </h1>
      <p class="py-6">
        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
        excepturi exercitationem quasi. In deleniti eaque aut repudiandae et
        a id nisi.
      </p>
    </Text>
    <Card class="flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
      <CardBody>
        <FormControl>
          <Label>
            <LabelText>Email</LabelText>
          </Label>
          <TextInput placeholder="" bordered />
        </FormControl>
        <FormControl>
          <Label>
            <LabelText>Password</LabelText>
          </Label>
          <TextInput placeholder="" bordered />
          <Label>
            <LabelTextAlt is="a" href="#" class="link link-hover">
              Forgot password?
            </LabelTextAlt>
          </Label>
        </FormControl>
        <FormControl class="mt-6">
          <Button primary>
            Login
          </Button>
        </FormControl>
      </CardBody>
    </Card>
  </HeroContent>
</Hero>

With Overlay

Hello there

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

Code Example 
<Hero class="h-[32rem]" style=" background-image: url(https://api.lorem.space/image/fashion?w=1000&h=800);" >
  <HeroOverlay class="bg-opacity-60" />
  <HeroContent center neutral-content>
    <div class="max-w-md">
      <Text is="h1" size="5xl" bold class="mb-5">
        Hello there
      </Text>
      <Text is="p" class="mb-5">
        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda
        excepturi exercitationem quasi. In deleniti eaque aut repudiandae
        et a id nisi.
      </Text>
      <Button primary>
        Get Started
      </Button>
    </div>
  </HeroContent>
</Hero>