import React from 'react'; import { Avatar, AvatarAddOn, Row, Container, Col, Card, CardBody, CardTitle, } from './../../../components'; import { randomAvatar } from './../../../utilities'; import { HeaderMain } from "../../components/HeaderMain"; import { HeaderDemo } from "../../components/HeaderDemo"; const Home = () => ( { /* START Header 1 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} /> { /* END Header 1 */} { /* START Section 1 */} Sizes: Large #1.01

Large size avatar example

Sizes: Default #1.02

Large size avatar example

Sizes: Small #1.03

Large size avatar example

{ /* END Section 1 */} { /* START Header 2 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} className="mt-5" /> { /* END Header 2 */} { /* START Section 2 */} Avatars: Photos #2.01

Large size avatar example

Avatars: Text #2.02

Large size avatar example

VN FS +4 Avatars: Icons #2.03

Large size avatar example

{ /* END Section 2 */} { /* START Header 3 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} className="mt-5" /> { /* END Header 3 */} { /* START Section 3 */} Avatar: Status Large #3.01

Large size avatar example

, ]} /> , ]} /> , ]} /> , ]} /> Avatar: Status Default #3.02

Large size avatar example

, ]} /> , ]} /> , ]} /> , ]} /> Avatar: Status Small #3.03

Large size avatar example

, ]} /> , ]} /> , ]} /> , ]} /> { /* END Section 3 */} { /* START Header 4 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} className="mt-5" /> { /* END Header 4 */} { /* START Section 4 */} Avatar: Badges Pills Small #4.01

Avatars with badges

4 ]} /> 12 ]} /> 4 ]} /> 7 ]} /> Avatar: Badges Pills Default #4.02

Avatars with badges

4 ]} /> 12 ]} /> 4 ]} /> 7 ]} /> Avatar: Badges Pills Small #4.03

Avatars with badges

4 ]} /> 12 ]} /> 4 ]} /> 7 ]} /> { /* END Section 4 */} { /* START Header 5 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} className="mt-5" /> { /* END Header 5 */} { /* START Section 5 */} Avatar: Badges Small #5.01

Avatars with badges

4 ]} /> 12 ]} /> 4 ]} /> 7 ]} /> Avatar: Badges Default #5.02

Avatars with badges

4 ]} /> 12 ]} /> 4 ]} /> 7 ]} /> Avatar: Badges Small #5.03

Avatars with badges

4 ]} /> 12 ]} /> 4 ]} /> 7 ]} /> { /* END Section 5 */} { /* START Header 6 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} className="mt-5" /> { /* END Header 6 */} { /* START Section 6 */} Avatar: Custom Icons Large #6.01

Avatars with badges

, , ]} /> , , ]} /> , , ]} /> , , ]} /> , , ]} /> Avatar: Custom Icons Default #6.02

Avatars with badges

, , ]} /> , , ]} /> , , ]} /> , , ]} /> , , ]} /> Avatar: Custom Icons Small #6.03

Avatars with badges

, , ]} /> , , ]} /> , , ]} /> , , ]} /> , , ]} /> { /* END Section 6 */} { /* START Header 7 */} There are versions available default, that is avatar: large: avatar avatar-lg & small: avatar avatar-sm. )} className="mt-5" /> { /* END Header 7 */} { /* START Section 7 */} Avatars: Colors Default #7.01

Large size avatar example

PR IN SU WA DA SE DA LI WH Avatars: Gray Colors #7.02

Large size avatar example

100 200 300 400 500 600 700 800 900 Avatars: Other Colors #7.03

Large size avatar example

IN PU PI TE CY Avatars: Colors Social #7.04

Large size avatar example

{ /* END Section 7 */} ); export default Home;