Avatar Geeks Only

Cool avatars with different shapes, sizes and with the possibility to group them.

Avatars

Use avatar sizing via class on avatar-* xxl, xl, lg, md, sm, xs

Design
Code
G K G K G K G K G K G K
<Avatar size="xxl" type="image" src={Avatar1} className="rounded-circle" status="online" alt="G K" />
<Avatar size="xl" type="image" src={Avatar1} className="rounded-circle" status="online" alt="G K" />
<Avatar size="lg" type="image" src={Avatar1} className="rounded-circle" status="online" alt="G K" />
<Avatar size="md" type="image" src={Avatar1} className="rounded-circle" status="online" alt="G K" />
<Avatar size="sm" type="image" src={Avatar1} className="rounded-circle" status="online" alt="G K" />
<Avatar size="xs" type="image" src={Avatar1} className="rounded-circle" status="online" alt="G K" />

Initials

You won't always have an image for every user, so easily use .avatar-initials instead.

Design
Code
GK GK GK GK GK GK
<Avatar size="xxl" type="initial" name="G K" className="rounded-circle" status="online" alt="G K" />
<Avatar size="xl" type="initial" name="G K" className="rounded-circle" status="online" alt="G K" />
<Avatar size="lg" type="initial" name="G K" className="rounded-circle" status="online" alt="G K" />
<Avatar size="md" type="initial" name="G K" className="rounded-circle" status="online" alt="G K" />
<Avatar size="sm" type="initial" name="G K" className="rounded-circle" status="online" alt="G K" />
<Avatar size="xs" type="initial" name="G K" className="rounded-circle" status="online" alt="G K" />

Status Indicator

Use .avatar-indicators class on div.avatar element

Design
Code
<Avatar size='xxl' src={Avatar1} type="image" status="online" className="rounded-circle"  />
<Avatar size='xl' src={Avatar1} type="image" status="away" className="rounded-circle"  />
<Avatar size='lg' src={Avatar1} type="image" status="offline" className="rounded-circle"  />
<Avatar size='md' src={Avatar1} type="image" status="online" className="rounded-circle"  />
<Avatar size='sm' src={Avatar1} type="image" status="away" className="rounded-circle"  />
<Avatar size='xs' src={Avatar1} type="image" status="online" className="rounded-circle"  />

Groups

Use <Avatar> within <AvatarGroup> to create Avtar Group. Set type = image or initial for Image avtar and avtar with initial respectivly.

Design
Code
GKGKGKGK
<div className="d-lg-flex">
    <AvatarGroup className="me-2">
        <Avatar size="lg" src={Avatar1} type="image" className="rounded-circle" />
        <Avatar size="lg" src={Avatar2} type="image" className="rounded-circle" />
        <Avatar size="lg" src={Avatar3} type="image" className="rounded-circle" />
        <Avatar size="lg" src={Avatar4} type="image" className="rounded-circle" />
    </AvatarGroup>
    <AvatarGroup>
        <Avatar size="lg" type="initial" name="G K" variant="primary" className="rounded-circle" />
        <Avatar size="lg" type="initial" name="G K" variant="warning" className="rounded-circle" />
        <Avatar size="lg" type="initial" name="G K" variant="success" className="rounded-circle" />
        <Avatar size="lg" type="initial" name="G K" variant="info" className="rounded-circle" />
    </AvatarGroup>
</div>

Groups with tooltip

Apply above settings mentioned in Avtar Group example + set name = name of avtar in string format and add imgtooltip parameters to add image tooltip.

Design
Code
JWDSKWNS
JWDSKWNS
<div className="d-lg-flex">
    <AvatarGroup className="me-2">
        <Avatar size="lg" src={Avatar1} type="image" className="rounded-circle" name='Jacob Wilson' imgtooltip />
        <Avatar size="lg" src={Avatar2} type="image" className="rounded-circle" name='Dianna Smiley' imgtooltip />
        <Avatar size="lg" src={Avatar3} type="image" className="rounded-circle" name='Kristin Watson' imgtooltip />
        <Avatar size="lg" src={Avatar4} type="image" className="rounded-circle" name='Nia Sikhone' imgtooltip />
    </AvatarGroup>
    <AvatarGroup className="me-2">
        <Avatar size="lg" type="initial" variant="primary" className="rounded-circle" name='Jacob Wilson' imgtooltip />
        <Avatar size="lg" type="initial" variant="warning" className="rounded-circle" name='Dianna Smiley' imgtooltip />
        <Avatar size="lg" type="initial" variant="success" className="rounded-circle" name='Kristin Watson' imgtooltip />
        <Avatar size="lg" type="initial" variant="info" className="rounded-circle" name='Nia Sikhone' imgtooltip />
    </AvatarGroup>
    <AvatarGroup>
        <Avatar size="lg" type="initial" variant="primary" className="rounded-circle" name='Jacob Wilson' imgtooltip soft />
        <Avatar size="lg" type="initial" variant="warning" className="rounded-circle" name='Dianna Smiley' imgtooltip soft />
        <Avatar size="lg" type="initial" variant="success" className="rounded-circle" name='Kristin Watson' imgtooltip soft />
        <Avatar size="lg" type="initial" variant="info" className="rounded-circle" name='Nia Sikhone' imgtooltip soft />
    </AvatarGroup>
</div>

Shape

Use .rounded and .rounded-circle class to make avatar rounded and circlular respectively.

Design
Code
GK GK
<div className="d-lg-flex">
    <div className="me-4">
        <Avatar  size="lg" src={Avatar1} type="image" className="rounded" /> 
        <Avatar  size="lg" src={Avatar2} type="image" className="rounded-circle"  />                                                  
    </div>
    <div>
        <Avatar size="lg" type="initial" name="G K" variant="primary" className="rounded"  />  
        <Avatar size="lg" type="initial" name="G K" variant="warning" className="rounded-circle"  />                                                  
    </div>
</div>

Ratio

For using 4:3 ratio size between the width and the height apply size attribute with xxl, xl, lg, md, sm, xs possible value with <Ratio> component.

Design
Code
<Ratio src={ImgPlaceholder} size="xxl" className="me-1 rounded" /> 
<Ratio src={ImgPlaceholder} size="xl" className="me-1 rounded" /> 
<Ratio src={ImgPlaceholder} size="lg" className="me-1 rounded" /> 
<Ratio src={ImgPlaceholder} size="md" className="me-1 rounded" /> 
<Ratio src={ImgPlaceholder} size="sm" className="me-1 rounded" /> 
<Ratio src={ImgPlaceholder} size="xs" className="me-1 rounded" />

Color

Predefined avatar color and styles for more usage. Use .avatar-* classes.

Design
Code
GK GK GK GK GK GK GK GK
<Avatar size="md" type="initial" name="G K" variant="primary" className="rounded-circle"  /> 
<Avatar size="md" type="initial" name="G K" variant="secondary" className="rounded-circle"  /> 
<Avatar size="md" type="initial" name="G K" variant="success" className="rounded-circle"  /> 
<Avatar size="md" type="initial" name="G K" variant="danger" className="rounded-circle"  /> 
<Avatar size="md" type="initial" name="G K" variant="warning" className="rounded-circle"  /> 
<Avatar size="md" type="initial" name="G K" variant="info" className="rounded-circle"  /> 
<Avatar size="md" type="initial" name="G K" variant="light" className="rounded-circle text-dark"  /> 
<Avatar size="md" type="initial" name="G K" variant="dark" className="rounded-circle"  />
Design
Code
GK GK GK GK GK GK GK GK
<Avatar size="md" type="initial" name="G K" soft variant="primary" className="rounded-circle" /> 
<Avatar size="md" type="initial" name="G K" soft variant="secondary" className="rounded-circle" /> 
<Avatar size="md" type="initial" name="G K" soft variant="success" className="rounded-circle" /> 
<Avatar size="md" type="initial" name="G K" soft variant="danger" className="rounded-circle" /> 
<Avatar size="md" type="initial" name="G K" soft variant="warning" className="rounded-circle" /> 
<Avatar size="md" type="initial" name="G K" soft variant="info" className="rounded-circle" /> 
<Avatar size="md" type="initial" name="G K" soft variant="light" className="rounded-circle text-dark"  /> 
<Avatar size="md" type="initial" name="G K" soft variant="dark" className="rounded-circle" />
Contents
Buy Now