###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### Avatar

##### Shapes

Default avatar is square in shape. For rounded and circle avatar add `.avatar-img .rounded` and `.avatar-img .circle` modifier classes respectively.

DG
DG
DG

##### Sizing

Fancy larger or smaller avatar? Add `.avatar-xl, .avatar-lg, .avatar-md, .avatar-sm` or `.avatar-xs` for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.

##### Avatar with initials

In need of an avatar, but not the image avatar? Replace the default modifier class with `.avatar-text .avatar-text-*` ones to create avatar with name initials.

PR
IN
SC
DG
WN
TL
GD
PK
ID
LT
DK

Class | Values
--- | ---
`class="avatar-text avatar-text-[value]"` | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

##### Avatar with inverse initials

Replace the default modifier class with `.avatar-text .avatar-text-inv-*` ones to create avatar with inverse colors.

PR
IN
SC
DG
WN
TL
GD
PK
ID

Class | Values
--- | ---
`class="avatar-text avatar-text-inv-[value]"` | primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

##### Groups

Wrap a series of avatars with `.avatar` in `.avatar-group`. Use `.avatar-group-lg` and `.avatar-group-sm` for additional sizes.

PR
RD
IN

###### Overlapped Avatar Group

For overlapped group of avatars replace default modifier class with `.avatar-group-overlapped`.

RD
IN
GR

###### Adding icon to avatar group

Add icons instead of initials by using i tag inside avatar. Change the font sizes using font utilities.