hero

Hero is a component for displaying a large box or image with a title and description.

Base Hero

hero = SingleValueFactory("hero", "Base hero container") # Base hero component
hero_content = SingleValueFactory("hero-content", "Hero content part") # Hero content part
hero_overlay = SingleValueFactory("hero-overlay", "Hero overlay that covers the background image") # Hero overlay part

Hero Test Examples

---

source

test_hero_basic_examples

 test_hero_basic_examples ()

Test basic hero utilities.

def test_hero_basic_examples():
    """Test basic hero utilities."""
    # Basic hero
    assert str(hero) == "hero"
    assert str(hero_content) == "hero-content"
    assert str(hero_overlay) == "hero-overlay"
    
    # Test with modifiers
    assert str(hero.hover) == "hover:hero"
    assert str(hero.md) == "md:hero"
    assert str(hero.dark) == "dark:hero"

# Run the tests
test_hero_basic_examples()

---

source

test_hero_centered_fasthtml_examples

 test_hero_centered_fasthtml_examples ()

Test centered hero example from daisyUI v5 documentation.

def test_hero_centered_fasthtml_examples():
    """Test centered hero example from daisyUI v5 documentation."""
    from fasthtml.common import Div, H1, P, Button
    from cjm_fasthtml_tailwind.utilities.sizing import min_h, max_w
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, text_align
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    
    # Centered hero
    centered_hero = Div(
        Div(
            Div(
                H1("Hello there", cls=combine_classes(font_size._5xl, font_weight.bold)),
                P(
                    "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.",
                    cls=str(p.y._6)
                ),
                Button("Get Started", cls=combine_classes(btn, btn_colors.primary)),
                cls=str(max_w.md)
            ),
            cls=combine_classes(hero_content, text_align.center)
        ),
        cls=combine_classes(hero, bg_dui.base_200, min_h.screen)
    )
    
    # Verify structure
    assert "hero" in centered_hero.attrs['class']
    assert "bg-base-200" in centered_hero.attrs['class']
    assert "min-h-screen" in centered_hero.attrs['class']
    
    # Verify hero-content
    hero_content_div = centered_hero.children[0]
    assert "hero-content" in hero_content_div.attrs['class']
    assert "text-center" in hero_content_div.attrs['class']
    
    # Verify inner content container
    content_container = hero_content_div.children[0]
    assert "max-w-md" in content_container.attrs['class']
    
    # Verify H1
    h1_element = content_container.children[0]
    assert h1_element.tag == "h1"
    assert "text-5xl" in h1_element.attrs['class']
    assert "font-bold" in h1_element.attrs['class']
    assert h1_element.children[0] == "Hello there"
    
    # Verify P
    p_element = content_container.children[1]
    assert p_element.tag == "p"
    assert "py-6" in p_element.attrs['class']
    assert "Provident cupiditate voluptatem et in" in p_element.children[0]
    
    # Verify Button
    button_element = content_container.children[2]
    assert button_element.tag == "button"
    assert "btn" in button_element.attrs['class']
    assert "btn-primary" in button_element.attrs['class']
    assert button_element.children[0] == "Get Started"
    
    return Div(centered_hero)

# Run the tests
test_hero_centered_fasthtml_examples()

<div>
  <div class="hero bg-base-200 min-h-screen">
    <div class="hero-content text-center">
      <div class="max-w-md">
        <h1 class="text-5xl font-bold">Hello there</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>
<button class="btn btn-primary">Get Started</button>      </div>
    </div>
  </div>
</div>

test_func = test_hero_centered_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_hero_with_figure_fasthtml_examples

 test_hero_with_figure_fasthtml_examples ()

Test hero with figure examples from daisyUI v5 documentation.

def test_hero_with_figure_fasthtml_examples():
    """Test hero with figure examples from daisyUI v5 documentation."""
    from fasthtml.common import Div, H1, P, Button, Img
    from cjm_fasthtml_tailwind.utilities.sizing import min_h, max_w
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    
    # Hero with figure
    hero_with_figure = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp",
                cls=combine_classes(max_w.sm, rounded.lg, shadow._2xl)
            ),
            Div(
                H1("Box Office News!", cls=combine_classes(font_size._5xl, font_weight.bold)),
                P(
                    "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.",
                    cls=str(p.y._6)
                ),
                Button("Get Started", cls=combine_classes(btn, btn_colors.primary))
            ),
            cls=combine_classes(hero_content, flex.col, flex.row.lg)
        ),
        cls=combine_classes(hero, bg_dui.base_200, min_h.screen)
    )
    
    # Verify structure
    assert "hero" in hero_with_figure.attrs['class']
    assert "bg-base-200" in hero_with_figure.attrs['class']
    assert "min-h-screen" in hero_with_figure.attrs['class']
    
    # Verify hero-content
    hero_content_div = hero_with_figure.children[0]
    assert "hero-content" in hero_content_div.attrs['class']
    assert "flex-col" in hero_content_div.attrs['class']
    assert "lg:flex-row" in hero_content_div.attrs['class']
    
    # Verify image
    img_element = hero_content_div.children[0]
    assert img_element.tag == "img"
    assert "max-w-sm" in img_element.attrs['class']
    assert "rounded-lg" in img_element.attrs['class']
    assert "shadow-2xl" in img_element.attrs['class']
    assert img_element.attrs['src'] == "https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
    
    # Verify content div
    content_div = hero_content_div.children[1]
    assert content_div.tag == "div"
    
    # Verify H1
    h1_element = content_div.children[0]
    assert h1_element.tag == "h1"
    assert "text-5xl" in h1_element.attrs['class']
    assert "font-bold" in h1_element.attrs['class']
    assert h1_element.children[0] == "Box Office News!"
    
    # Verify P
    p_element = content_div.children[1]
    assert p_element.tag == "p"
    assert "py-6" in p_element.attrs['class']
    
    # Verify Button
    button_element = content_div.children[2]
    assert button_element.tag == "button"
    assert "btn" in button_element.attrs['class']
    assert "btn-primary" in button_element.attrs['class']
    assert button_element.children[0] == "Get Started"
    
    # Hero with figure but reverse order
    hero_with_figure_reverse = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp",
                cls=combine_classes(max_w.sm, rounded.lg, shadow._2xl)
            ),
            Div(
                H1("Box Office News!", cls=combine_classes(font_size._5xl, font_weight.bold)),
                P(
                    "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.",
                    cls=str(p.y._6)
                ),
                Button("Get Started", cls=combine_classes(btn, btn_colors.primary))
            ),
            cls=combine_classes(hero_content, flex.col, flex.row_reverse.lg)
        ),
        cls=combine_classes(hero, bg_dui.base_200, min_h.screen)
    )
    
    # Verify reverse order structure
    assert "hero" in hero_with_figure_reverse.attrs['class']
    assert "bg-base-200" in hero_with_figure_reverse.attrs['class']
    assert "min-h-screen" in hero_with_figure_reverse.attrs['class']
    
    # Verify hero-content with reverse
    hero_content_reverse = hero_with_figure_reverse.children[0]
    assert "hero-content" in hero_content_reverse.attrs['class']
    assert "flex-col" in hero_content_reverse.attrs['class']
    assert "lg:flex-row-reverse" in hero_content_reverse.attrs['class']
    
    return Div(hero_with_figure, hero_with_figure_reverse)

# Run the tests
test_hero_with_figure_fasthtml_examples()

<div>
  <div class="hero bg-base-200 min-h-screen">
    <div class="hero-content flex-col lg:flex-row">
<img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp" class="max-w-sm rounded-lg shadow-2xl">      <div>
        <h1 class="text-5xl font-bold">Box Office News!</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>
<button class="btn btn-primary">Get Started</button>      </div>
    </div>
  </div>
  <div class="hero bg-base-200 min-h-screen">
    <div class="hero-content flex-col lg:flex-row-reverse">
<img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp" class="max-w-sm rounded-lg shadow-2xl">      <div>
        <h1 class="text-5xl font-bold">Box Office News!</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>
<button class="btn btn-primary">Get Started</button>      </div>
    </div>
  </div>
</div>

test_func = test_hero_with_figure_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_hero_with_form_fasthtml_examples

 test_hero_with_form_fasthtml_examples ()

Test hero with form example from daisyUI v5 documentation.

def test_hero_with_form_fasthtml_examples():
    """Test hero with form example from daisyUI v5 documentation."""
    from fasthtml.common import Div, H1, P, Button, Input, Label, Fieldset, A
    from cjm_fasthtml_tailwind.utilities.sizing import min_h, max_w, w
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, text_align
    from cjm_fasthtml_tailwind.utilities.spacing import p, m
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex, shrink
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input 
    from cjm_fasthtml_daisyui.components.data_input.label import label
    from cjm_fasthtml_daisyui.components.navigation.link import link, link_styles
    from cjm_fasthtml_daisyui.components.data_input.fieldset import fieldset
    
    # Hero with form
    hero_with_form = Div(
        Div(
            Div(
                H1("Login now!", cls=combine_classes(font_size._5xl, font_weight.bold)),
                P(
                    "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.",
                    cls=str(p.y._6)
                ),
                cls=combine_classes(text_align.center, text_align.left.lg)
            ),
            Div(
                Div(
                    Fieldset(
                        Label("Email", cls=str(label)),
                        Input(type="email", placeholder="Email", cls=str(text_input)),
                        Label("Password", cls=str(label)),
                        Input(type="password", placeholder="Password", cls=str(text_input)),
                        Div(
                            A("Forgot password?", cls=combine_classes(link, link_styles.hover))
                        ),
                        Button("Login", cls=combine_classes(btn, btn_colors.neutral, m.t._4)),
                        cls=str(fieldset)
                    ),
                    cls=str(card_body)
                ),
                cls=combine_classes(card, bg_dui.base_100, w.full, max_w.sm, shrink._0, shadow._2xl)
            ),
            cls=combine_classes(hero_content, flex.col, flex.row_reverse.lg)
        ),
        cls=combine_classes(hero, bg_dui.base_200, min_h.screen)
    )
    
    # Verify structure
    assert "hero" in hero_with_form.attrs['class']
    assert "bg-base-200" in hero_with_form.attrs['class']
    assert "min-h-screen" in hero_with_form.attrs['class']
    
    # Verify hero-content
    hero_content_div = hero_with_form.children[0]
    assert "hero-content" in hero_content_div.attrs['class']
    assert "flex-col" in hero_content_div.attrs['class']
    assert "lg:flex-row-reverse" in hero_content_div.attrs['class']
    
    # Verify text content div
    text_div = hero_content_div.children[0]
    assert text_div.tag == "div"
    assert "text-center" in text_div.attrs['class']
    assert "lg:text-left" in text_div.attrs['class']
    
    # Verify H1
    h1_element = text_div.children[0]
    assert h1_element.tag == "h1"
    assert "text-5xl" in h1_element.attrs['class']
    assert "font-bold" in h1_element.attrs['class']
    assert h1_element.children[0] == "Login now!"
    
    # Verify P
    p_element = text_div.children[1]
    assert p_element.tag == "p"
    assert "py-6" in p_element.attrs['class']
    
    # Verify card
    card_div = hero_content_div.children[1]
    assert "card" in card_div.attrs['class']
    assert "bg-base-100" in card_div.attrs['class']
    assert "w-full" in card_div.attrs['class']
    assert "max-w-sm" in card_div.attrs['class']
    assert "shrink-0" in card_div.attrs['class']
    assert "shadow-2xl" in card_div.attrs['class']
    
    # Verify card body
    card_body_div = card_div.children[0]
    assert "card-body" in card_body_div.attrs['class']
    
    # Verify fieldset
    fieldset_element = card_body_div.children[0]
    assert fieldset_element.tag == "fieldset"
    assert fieldset_element.attrs['class'] == "fieldset"
    
    # Verify first label and input (Email)
    assert fieldset_element.children[0].tag == "label"
    assert "label" in fieldset_element.children[0].attrs['class']
    assert fieldset_element.children[0].children[0] == "Email"
    
    assert fieldset_element.children[1].tag == "input"
    assert fieldset_element.children[1].attrs['type'] == "email"
    assert "input" in fieldset_element.children[1].attrs['class']
    assert fieldset_element.children[1].attrs['placeholder'] == "Email"
    
    # Verify second label and input (Password)
    assert fieldset_element.children[2].tag == "label"
    assert "label" in fieldset_element.children[2].attrs['class']
    assert fieldset_element.children[2].children[0] == "Password"
    
    assert fieldset_element.children[3].tag == "input"
    assert fieldset_element.children[3].attrs['type'] == "password"
    assert "input" in fieldset_element.children[3].attrs['class']
    assert fieldset_element.children[3].attrs['placeholder'] == "Password"
    
    # Verify forgot password link
    link_div = fieldset_element.children[4]
    assert link_div.tag == "div"
    assert link_div.children[0].tag == "a"
    assert "link" in link_div.children[0].attrs['class']
    assert "link-hover" in link_div.children[0].attrs['class']
    assert link_div.children[0].children[0] == "Forgot password?"
    
    # Verify login button
    login_button = fieldset_element.children[5]
    assert login_button.tag == "button"
    assert "btn" in login_button.attrs['class']
    assert "btn-neutral" in login_button.attrs['class']
    assert "mt-4" in login_button.attrs['class']
    assert login_button.children[0] == "Login"
    
    return Div(hero_with_form)

# Run the tests
test_hero_with_form_fasthtml_examples()

<div>
  <div class="hero bg-base-200 min-h-screen">
    <div class="hero-content flex-col lg:flex-row-reverse">
      <div class="text-center 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>
      </div>
      <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
        <div class="card-body">
<fieldset class="fieldset"><label class="label">Email</label>            <input type="email" placeholder="Email" class="input">
<label class="label">Password</label>            <input type="password" placeholder="Password" class="input">
            <div>
<a href="#" class="link link-hover">Forgot password?</a>            </div>
<button class="btn btn-neutral mt-4">Login</button></fieldset>        </div>
      </div>
    </div>
  </div>
</div>

test_func = test_hero_with_form_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_hero_with_overlay_fasthtml_examples

 test_hero_with_overlay_fasthtml_examples ()

Test hero with overlay image example from daisyUI v5 documentation.

def test_hero_with_overlay_fasthtml_examples():
    """Test hero with overlay image example from daisyUI v5 documentation."""
    from fasthtml.common import Div, H1, P, Button
    from cjm_fasthtml_tailwind.utilities.sizing import min_h, max_w
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color, text_align
    from cjm_fasthtml_tailwind.utilities.spacing import m
    from cjm_fasthtml_daisyui.utilities.semantic_colors import text_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    
    # Hero with overlay image
    hero_with_overlay = Div(
        Div(cls=str(hero_overlay)),
        Div(
            Div(
                H1("Hello there", cls=combine_classes(m.b._5, font_size._5xl, font_weight.bold)),
                P(
                    "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.",
                    cls=str(m.b._5)
                ),
                Button("Get Started", cls=combine_classes(btn, btn_colors.primary)),
                cls=str(max_w.md)
            ),
            cls=combine_classes(hero_content, text_dui.neutral_content, text_align.center)
        ),
        cls=combine_classes(hero, min_h.screen),
        style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
    )
    
    # Verify structure
    assert "hero" in hero_with_overlay.attrs['class']
    assert "min-h-screen" in hero_with_overlay.attrs['class']
    assert hero_with_overlay.attrs['style'] == "background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
    
    # Verify hero-overlay
    hero_overlay_div = hero_with_overlay.children[0]
    assert "hero-overlay" in hero_overlay_div.attrs['class']
    
    # Verify hero-content
    hero_content_div = hero_with_overlay.children[1]
    assert "hero-content" in hero_content_div.attrs['class']
    assert "text-neutral-content" in hero_content_div.attrs['class']
    assert "text-center" in hero_content_div.attrs['class']
    
    # Verify inner content container
    content_container = hero_content_div.children[0]
    assert "max-w-md" in content_container.attrs['class']
    
    # Verify H1
    h1_element = content_container.children[0]
    assert h1_element.tag == "h1"
    assert "mb-5" in h1_element.attrs['class']
    assert "text-5xl" in h1_element.attrs['class']
    assert "font-bold" in h1_element.attrs['class']
    assert h1_element.children[0] == "Hello there"
    
    # Verify P
    p_element = content_container.children[1]
    assert p_element.tag == "p"
    assert "mb-5" in p_element.attrs['class']
    assert "Provident cupiditate voluptatem et in" in p_element.children[0]
    
    # Verify Button
    button_element = content_container.children[2]
    assert button_element.tag == "button"
    assert "btn" in button_element.attrs['class']
    assert "btn-primary" in button_element.attrs['class']
    assert button_element.children[0] == "Get Started"
    
    return Div(hero_with_overlay)

# Run the tests
test_hero_with_overlay_fasthtml_examples()

<div>
  <div class="hero min-h-screen" style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);">
    <div class="hero-overlay"></div>
    <div class="hero-content text-neutral-content text-center">
      <div class="max-w-md">
        <h1 class="mb-5 text-5xl font-bold">Hello there</h1>
        <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.</p>
<button class="btn btn-primary">Get Started</button>      </div>
    </div>
  </div>
</div>

test_func = test_hero_with_overlay_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()