avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

from nbdev.showdoc import *

Base Avatar

The base avatar components:

avatar = SingleValueFactory("avatar", "Avatar container component") # Avatar container
avatar_group = SingleValueFactory("avatar-group", "Container for multiple avatars") # Avatar group

Avatar Modifiers

Avatar modifier utilities:

avatar_modifiers = SimpleFactory(
    {
        "online": "avatar-online",
        "offline": "avatar-offline",
        "placeholder": "avatar-placeholder"
    },
    "Avatar modifiers (online/offline indicators, placeholder)"
) # Avatar modifiers

Avatar Test Examples

---

source

test_avatar_basic_examples

 test_avatar_basic_examples ()

Test basic avatar utilities.

def test_avatar_basic_examples():
    """Test basic avatar utilities."""
    # Basic components
    assert str(avatar) == "avatar"
    assert str(avatar_group) == "avatar-group"
    
    # With modifiers
    assert str(avatar.hover) == "hover:avatar"
    assert str(avatar_group.md) == "md:avatar-group"

# Run the tests
test_avatar_basic_examples()

---

source

test_avatar_modifiers_examples

 test_avatar_modifiers_examples ()

Test avatar modifier utilities.

def test_avatar_modifiers_examples():
    """Test avatar modifier utilities."""
    assert str(avatar_modifiers.online) == "avatar-online"
    assert str(avatar_modifiers.offline) == "avatar-offline"
    assert str(avatar_modifiers.placeholder) == "avatar-placeholder"
    
    # With responsive modifiers
    assert str(avatar_modifiers.online.hover) == "hover:avatar-online"
    assert str(avatar_modifiers.placeholder.md) == "md:avatar-placeholder"

# Run the tests
test_avatar_modifiers_examples()

---

source

test_avatar_basic_fasthtml_examples

 test_avatar_basic_fasthtml_examples ()

Test basic avatar and avatar in custom sizes from daisyUI v5 documentation.

def test_avatar_basic_fasthtml_examples():
    """Test basic avatar and avatar in custom sizes from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    
    # Basic avatar
    basic_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/batperson@192.webp"),
            cls=combine_classes(w._24, rounded())
        ),
        cls=str(avatar)
    )
    assert "avatar" in basic_avatar.attrs['class']
    assert basic_avatar.children[0].tag == "div"
    assert "w-24" in basic_avatar.children[0].attrs['class']
    assert "rounded" in basic_avatar.children[0].attrs['class']
    assert basic_avatar.children[0].children[0].tag == "img"
    assert basic_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/batperson@192.webp"
    
    # Avatar in custom sizes
    size_32_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/superperson@192.webp"),
            cls=combine_classes(w._32, rounded())
        ),
        cls=str(avatar)
    )
    assert "avatar" in size_32_avatar.attrs['class']
    assert "w-32" in size_32_avatar.children[0].attrs['class']
    assert size_32_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/superperson@192.webp"
    
    size_20_avatar = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/profile/demo/superperson@192.webp",
                alt="Tailwind-CSS-Avatar-component"
            ),
            cls=combine_classes(w._20, rounded())
        ),
        cls=str(avatar)
    )
    assert "w-20" in size_20_avatar.children[0].attrs['class']
    assert size_20_avatar.children[0].children[0].attrs['alt'] == "Tailwind-CSS-Avatar-component"
    
    size_16_avatar = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/profile/demo/superperson@192.webp",
                alt="Tailwind-CSS-Avatar-component"
            ),
            cls=combine_classes(w._16, rounded())
        ),
        cls=str(avatar)
    )
    assert "w-16" in size_16_avatar.children[0].attrs['class']
    
    size_8_avatar = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/profile/demo/superperson@192.webp",
                alt="Tailwind-CSS-Avatar-component"
            ),
            cls=combine_classes(w._8, rounded())
        ),
        cls=str(avatar)
    )
    assert "w-8" in size_8_avatar.children[0].attrs['class']
    
    # Return all examples in a Div
    return Div(
        basic_avatar,
        size_32_avatar,
        size_20_avatar,
        size_16_avatar,
        size_8_avatar
    )

# Run the tests
test_avatar_basic_fasthtml_examples()

<div>
  <div class="avatar">
    <div class="w-24 rounded">
<img src="https://img.daisyui.com/images/profile/demo/batperson@192.webp">    </div>
  </div>
  <div class="avatar">
    <div class="w-32 rounded">
<img src="https://img.daisyui.com/images/profile/demo/superperson@192.webp">    </div>
  </div>
  <div class="avatar">
    <div class="w-20 rounded">
<img src="https://img.daisyui.com/images/profile/demo/superperson@192.webp" alt="Tailwind-CSS-Avatar-component">    </div>
  </div>
  <div class="avatar">
    <div class="w-16 rounded">
<img src="https://img.daisyui.com/images/profile/demo/superperson@192.webp" alt="Tailwind-CSS-Avatar-component">    </div>
  </div>
  <div class="avatar">
    <div class="w-8 rounded">
<img src="https://img.daisyui.com/images/profile/demo/superperson@192.webp" alt="Tailwind-CSS-Avatar-component">    </div>
  </div>
</div>

test_func = test_avatar_basic_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_avatar_rounded_and_mask_fasthtml_examples

 test_avatar_rounded_and_mask_fasthtml_examples ()

Test avatar rounded and avatar with mask from daisyUI v5 documentation.

def test_avatar_rounded_and_mask_fasthtml_examples():
    """Test avatar rounded and avatar with mask from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.components.layout.mask import mask, mask_styles
    
    # Avatar rounded
    rounded_xl_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/yellingwoman@192.webp"),
            cls=combine_classes(w._24, rounded.xl)
        ),
        cls=str(avatar)
    )
    assert "avatar" in rounded_xl_avatar.attrs['class']
    assert "w-24" in rounded_xl_avatar.children[0].attrs['class']
    assert "rounded-xl" in rounded_xl_avatar.children[0].attrs['class']
    assert rounded_xl_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/yellingwoman@192.webp"
    
    rounded_full_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/yellingcat@192.webp"),
            cls=combine_classes(w._24, rounded.full)
        ),
        cls=str(avatar)
    )
    assert "w-24" in rounded_full_avatar.children[0].attrs['class']
    assert "rounded-full" in rounded_full_avatar.children[0].attrs['class']
    assert rounded_full_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/yellingcat@192.webp"
    
    # Avatar with mask
    mask_heart_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/distracted3@192.webp"),
            cls=combine_classes(mask, mask_styles.heart, w._24)
        ),
        cls=str(avatar)
    )
    assert "avatar" in mask_heart_avatar.attrs['class']
    assert "mask" in mask_heart_avatar.children[0].attrs['class']
    assert "mask-heart" in mask_heart_avatar.children[0].attrs['class']
    assert "w-24" in mask_heart_avatar.children[0].attrs['class']
    assert mask_heart_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/distracted3@192.webp"
    
    mask_squircle_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/distracted1@192.webp"),
            cls=combine_classes(mask, mask_styles.squircle, w._24)
        ),
        cls=str(avatar)
    )
    assert "mask" in mask_squircle_avatar.children[0].attrs['class']
    assert "mask-squircle" in mask_squircle_avatar.children[0].attrs['class']
    assert mask_squircle_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/distracted1@192.webp"
    
    mask_hexagon_2_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/distracted2@192.webp"),
            cls=combine_classes(mask, mask_styles.hexagon_2, w._24)
        ),
        cls=str(avatar)
    )
    assert "mask" in mask_hexagon_2_avatar.children[0].attrs['class']
    assert "mask-hexagon-2" in mask_hexagon_2_avatar.children[0].attrs['class']
    assert mask_hexagon_2_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/distracted2@192.webp"
    
    # Return all examples in a Div
    return Div(
        rounded_xl_avatar,
        rounded_full_avatar,
        mask_heart_avatar,
        mask_squircle_avatar,
        mask_hexagon_2_avatar
    )

# Run the tests
test_avatar_rounded_and_mask_fasthtml_examples()

<div>
  <div class="avatar">
    <div class="w-24 rounded-xl">
<img src="https://img.daisyui.com/images/profile/demo/yellingwoman@192.webp">    </div>
  </div>
  <div class="avatar">
    <div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/profile/demo/yellingcat@192.webp">    </div>
  </div>
  <div class="avatar">
    <div class="mask mask-heart w-24">
<img src="https://img.daisyui.com/images/profile/demo/distracted3@192.webp">    </div>
  </div>
  <div class="avatar">
    <div class="mask mask-squircle w-24">
<img src="https://img.daisyui.com/images/profile/demo/distracted1@192.webp">    </div>
  </div>
  <div class="avatar">
    <div class="mask mask-hexagon-2 w-24">
<img src="https://img.daisyui.com/images/profile/demo/distracted2@192.webp">    </div>
  </div>
</div>

test_func = test_avatar_rounded_and_mask_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_avatar_group_fasthtml_examples

 test_avatar_group_fasthtml_examples ()

Test avatar group and avatar group with counter from daisyUI v5 documentation.

def test_avatar_group_fasthtml_examples():
    """Test avatar group and avatar group with counter from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img, Span
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.spacing import space
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    
    # Avatar group
    avatar_group_example = Div(
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/batperson@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/averagebulk@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/wonderperson@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        cls=combine_classes(avatar_group, space.x(6, negative=True))
    )
    assert "avatar-group" in avatar_group_example.attrs['class']
    assert "-space-x-6" in avatar_group_example.attrs['class']
    assert len(avatar_group_example.children) == 4
    for i, child in enumerate(avatar_group_example.children):
        assert "avatar" in child.attrs['class']
        assert "w-12" in child.children[0].attrs['class']
        assert child.children[0].children[0].tag == "img"
    
    # Avatar group with counter
    avatar_group_counter = Div(
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/batperson@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        Div(
            Div(
                Img(src="https://img.daisyui.com/images/profile/demo/averagebulk@192.webp"),
                cls=str(w._12)
            ),
            cls=str(avatar)
        ),
        Div(
            Div(
                Span("+99"),
                cls=combine_classes(bg_dui.neutral, text_dui.neutral_content, w._12)
            ),
            cls=combine_classes(avatar, avatar_modifiers.placeholder)
        ),
        cls=combine_classes(avatar_group, space.x(6, negative=True))
    )
    assert "avatar-group" in avatar_group_counter.attrs['class']
    assert "-space-x-6" in avatar_group_counter.attrs['class']
    # Check the counter avatar
    counter_avatar = avatar_group_counter.children[3]
    assert "avatar" in counter_avatar.attrs['class']
    assert "avatar-placeholder" in counter_avatar.attrs['class']
    counter_div = counter_avatar.children[0]
    assert "bg-neutral" in counter_div.attrs['class']
    assert "text-neutral-content" in counter_div.attrs['class']
    assert "w-12" in counter_div.attrs['class']
    assert counter_div.children[0].tag == "span"
    assert counter_div.children[0].children[0] == "+99"
    
    # Return all examples in a Div
    return Div(
        avatar_group_example,
        avatar_group_counter
    )

# Run the tests
test_avatar_group_fasthtml_examples()

<div>
  <div class="avatar-group -space-x-6">
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/batperson@192.webp">      </div>
    </div>
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp">      </div>
    </div>
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/averagebulk@192.webp">      </div>
    </div>
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/wonderperson@192.webp">      </div>
    </div>
  </div>
  <div class="avatar-group -space-x-6">
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/batperson@192.webp">      </div>
    </div>
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp">      </div>
    </div>
    <div class="avatar">
      <div class="w-12">
<img src="https://img.daisyui.com/images/profile/demo/averagebulk@192.webp">      </div>
    </div>
    <div class="avatar avatar-placeholder">
      <div class="bg-neutral text-neutral-content w-12">
<span>+99</span>      </div>
    </div>
  </div>
</div>

test_func = test_avatar_group_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_avatar_ring_and_presence_fasthtml_examples

 test_avatar_ring_and_presence_fasthtml_examples ()

Test avatar with ring and avatar with presence indicator from daisyUI v5 documentation.

def test_avatar_ring_and_presence_fasthtml_examples():
    """Test avatar with ring and avatar with presence indicator from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_tailwind.utilities.effects import ring
    from cjm_fasthtml_daisyui.utilities.semantic_colors import ring_dui, ring_offset_dui
    
    # Avatar with ring
    ring_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp"),
            cls=combine_classes(
                ring_dui.primary,
                ring_offset_dui.base_100,
                w._24,
                rounded.full,
                ring._2,
            )
        ),
        cls=str(avatar)
    )
    assert "avatar" in ring_avatar.attrs['class']
    ring_div = ring_avatar.children[0]
    assert "ring-primary" in ring_div.attrs['class']
    assert "ring-offset-base-100" in ring_div.attrs['class']
    assert "w-24" in ring_div.attrs['class']
    assert "rounded-full" in ring_div.attrs['class']
    assert "ring-2" in ring_div.attrs['class']
    assert ring_div.children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/spiderperson@192.webp"
    
    # Avatar with presence indicator - online
    online_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/gordon@192.webp"),
            cls=combine_classes(w._24, rounded.full)
        ),
        cls=combine_classes(avatar, avatar_modifiers.online)
    )
    assert "avatar" in online_avatar.attrs['class']
    assert "avatar-online" in online_avatar.attrs['class']
    assert "w-24" in online_avatar.children[0].attrs['class']
    assert "rounded-full" in online_avatar.children[0].attrs['class']
    assert online_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/gordon@192.webp"
    
    # Avatar with presence indicator - offline
    offline_avatar = Div(
        Div(
            Img(src="https://img.daisyui.com/images/profile/demo/idiotsandwich@192.webp"),
            cls=combine_classes(w._24, rounded.full)
        ),
        cls=combine_classes(avatar, avatar_modifiers.offline)
    )
    assert "avatar" in offline_avatar.attrs['class']
    assert "avatar-offline" in offline_avatar.attrs['class']
    assert offline_avatar.children[0].children[0].attrs['src'] == "https://img.daisyui.com/images/profile/demo/idiotsandwich@192.webp"
    
    # Return all examples in a Div
    return Div(
        ring_avatar,
        online_avatar,
        offline_avatar
    )

# Run the tests
test_avatar_ring_and_presence_fasthtml_examples()

<div>
  <div class="avatar">
    <div class="ring-primary ring-offset-base-100 w-24 rounded-full ring-2">
<img src="https://img.daisyui.com/images/profile/demo/spiderperson@192.webp">    </div>
  </div>
  <div class="avatar avatar-online">
    <div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/profile/demo/gordon@192.webp">    </div>
  </div>
  <div class="avatar avatar-offline">
    <div class="w-24 rounded-full">
<img src="https://img.daisyui.com/images/profile/demo/idiotsandwich@192.webp">    </div>
  </div>
</div>

test_func = test_avatar_ring_and_presence_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_avatar_placeholder_fasthtml_examples

 test_avatar_placeholder_fasthtml_examples ()

Test avatar placeholder from daisyUI v5 documentation.

def test_avatar_placeholder_fasthtml_examples():
    """Test avatar placeholder from daisyUI v5 documentation."""
    from fasthtml.common import Div, Span
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    
    # Basic avatar placeholder
    placeholder_d = Div(
        Div(
            Span("D", cls=str(font_size._3xl)),
            cls=combine_classes(bg_dui.neutral, text_dui.neutral_content, w._24, rounded.full)
        ),
        cls=combine_classes(avatar, avatar_modifiers.placeholder)
    )
    assert "avatar" in placeholder_d.attrs['class']
    assert "avatar-placeholder" in placeholder_d.attrs['class']
    placeholder_div = placeholder_d.children[0]
    assert "bg-neutral" in placeholder_div.attrs['class']
    assert "text-neutral-content" in placeholder_div.attrs['class']
    assert "w-24" in placeholder_div.attrs['class']
    assert "rounded-full" in placeholder_div.attrs['class']
    assert placeholder_div.children[0].tag == "span"
    assert "text-3xl" in placeholder_div.children[0].attrs['class']
    assert placeholder_div.children[0].children[0] == "D"
    
    # Avatar placeholder with online status
    online_placeholder = Div(
        Div(
            Span("AI", cls=str(font_size.xl)),
            cls=combine_classes(bg_dui.neutral, text_dui.neutral_content, w._16, rounded.full)
        ),
        cls=combine_classes(avatar, avatar_modifiers.online, avatar_modifiers.placeholder)
    )
    assert "avatar" in online_placeholder.attrs['class']
    assert "avatar-online" in online_placeholder.attrs['class']
    assert "avatar-placeholder" in online_placeholder.attrs['class']
    assert "w-16" in online_placeholder.children[0].attrs['class']
    assert "text-xl" in online_placeholder.children[0].children[0].attrs['class']
    assert online_placeholder.children[0].children[0].children[0] == "AI"
    
    # Smaller avatar placeholder
    placeholder_sy = Div(
        Div(
            Span("SY"),
            cls=combine_classes(bg_dui.neutral, text_dui.neutral_content, w._12, rounded.full)
        ),
        cls=combine_classes(avatar, avatar_modifiers.placeholder)
    )
    assert "w-12" in placeholder_sy.children[0].attrs['class']
    assert placeholder_sy.children[0].children[0].children[0] == "SY"
    
    # Extra small avatar placeholder
    placeholder_ui = Div(
        Div(
            Span("UI", cls=str(font_size.xs)),
            cls=combine_classes(bg_dui.neutral, text_dui.neutral_content, w._8, rounded.full)
        ),
        cls=combine_classes(avatar, avatar_modifiers.placeholder)
    )
    assert "w-8" in placeholder_ui.children[0].attrs['class']
    assert "text-xs" in placeholder_ui.children[0].children[0].attrs['class']
    assert placeholder_ui.children[0].children[0].children[0] == "UI"
    
    # Return all examples in a Div
    return Div(
        placeholder_d,
        online_placeholder,
        placeholder_sy,
        placeholder_ui
    )

# Run the tests
test_avatar_placeholder_fasthtml_examples()

<div>
  <div class="avatar avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-24 rounded-full">
<span class="text-3xl">D</span>    </div>
  </div>
  <div class="avatar avatar-online avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-16 rounded-full">
<span class="text-xl">AI</span>    </div>
  </div>
  <div class="avatar avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-12 rounded-full">
<span>SY</span>    </div>
  </div>
  <div class="avatar avatar-placeholder">
    <div class="bg-neutral text-neutral-content w-8 rounded-full">
<span class="text-xs">UI</span>    </div>
  </div>
</div>

test_func = test_avatar_placeholder_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()