## Hero **Category**: Layout Full-width banner sections with flexible content layouts ### Examples #### Centered Hero ```python Div( Div( Div( H3('Hello there', cls='text-5xl font-bold'), P('Provident cupiditate voluptatem et in...', cls='py-6'), Button('Get Started', cls='btn btn-primary'), cls='max-w-md' ), cls='hero-content text-center' ), cls='hero min-h-[30rem] rounded bg-base-200' ) ``` #### Hero with Figure ```python Div( Div( Img(src='https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp', cls='max-w-sm rounded-lg shadow-2xl'), Div( H1('Box Office News!', cls='text-5xl font-bold'), P('Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.', cls='py-6'), Button('Get Started', cls='btn btn-primary') ), cls='hero-content flex-col lg:flex-row' ), cls='hero bg-base-200 min-h-[30rem]' ) ``` #### Hero with Reverse Figure ```python Div( Div( Img(src='https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp', cls='max-w-sm rounded-lg shadow-2xl'), Div( H1('Box Office News!', cls='text-5xl font-bold'), P('Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.', cls='py-6'), Button('Get Started', cls='btn btn-primary') ), cls='hero-content flex-col lg:flex-row-reverse' ), cls='hero bg-base-200 min-h-[30rem]' ) ``` #### Hero with Background Image ```python Div( Div(cls='hero-overlay bg-opacity-60'), Div( Div( H1('Hello there', cls='mb-5 text-5xl font-bold'), P('Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.', cls='mb-5'), Button('Get Started', cls='btn btn-primary'), cls='max-w-md' ), cls='hero-content text-neutral-content text-center' ), style='background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);', cls='hero min-h-[30rem]' ) ``` #### Hero with Form ```python Div( Div( Div( H1('Login now!', cls='text-5xl font-bold'), P('Provident cupiditate voluptatem et in...', cls='py-6'), cls='text-center lg:text-left' ), Div( Div( Fieldset( Label("Email", cls="fieldset-label"), Input(type="email", cls="input", placeholder="Email"), Label("Password", cls="fieldset-label"), Input(type="password", cls="input", placeholder="Password"), Div(A("Forgot password?", cls="link link-hover")), Button("Login", cls="btn btn-neutral mt-4"), cls="fieldset" ), cls="card-body" ), cls='card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl' ), cls='hero-content flex-col lg:flex-row-reverse' ), cls='hero bg-base-200 min-h-[30rem]' )

Login now!

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

```