Create Next App

Avatar

Avatar This is a guideline for you on how to create you first product in your store

Avatar

This is a guideline for you on how to create you first product in your store

24px

32px

40px

48px

56px

64px

React js

import * as React from 'react';
import Avatar from 'vestarplus/Avatar';

export default function BasicAvatarfunction() {
  return (
//without calling the image you have a default image 

    // without a presence indicator
      <Avatar size="size64" />

      // with a presence indicator of offline
    <Avatar size="size64" presence="offline" />

     // with a presence indicator of online
     <Avatar size="size56" presence="online" />

 // with image (you can import your image there)
      <Avatar size="size64"presence="online" image={text} />
  );
}

HTMLCSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Avatar.css">
  <title>Avatar Component</title>
</head>
<body>

<div class="avatarContainer size64 online">
  <div class="avatarCircle">
    <img src="path/to/your/image.jpg" alt="">
    <div class="activeIndicator online"></div>
  </div>
</div>

</body>
</html>

Acronym Avatars

This is a guideline for you on how to create you first product in your store

24px

T.O

T.O

T.O

32px

T.O

T.O

T.O

40px

T.O

T.O

T.O

48px

T.O

T.O

T.O

56px

T.O

T.O

T.O

64px

T.O

T.O

T.O

React js

import * as React from 'react';

import AcronymAvatars from 'vestarplus/AcronymAvatars';

export default function BasicAvatarfunction() {
  return (
//without calling the bgColor and acronymColor  you have a default color

// when calling the name there has to be a space so it can be acronymed else it will be just one character 

    // without a presence indicator
     <AcronymAvatars size="size24"name="timothy okoduwa"bgColor="#ffcc00"acronymColor="#9900cc"fontSize="8px"/>

      // with a presence indicator of offline
   <AcronymAvatars presence="offline" size="size24"name="timothy okoduwa"bgColor="#ffcc00"acronymColor="#9900cc"fontSize="8px"/>

     // with a presence indicator of online
     <Avatar size="size56" presence="online" />
       
   <AcronymAvatars presence="online" size="size24"name="timothy okoduwa"bgColor="#ffcc00"acronymColor="#9900cc"fontSize="8px"/>


  );
}

HTMLCSSJS

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <script defer src="script.js"></script>
        <title>Acronym Avatars</title>
    </head>

    <body>
        <div id="acronymAvatar" class="AcronymAvatarHolder size32 online">
            <div id="acronymCircle" style="background-color: #dbeefe;">
                <span id="acronymSpan" style="color: #3693F7; font-size: 10px;"></span>
            </div>
            <div id="activeIndicator" class="activeIndicator online"></div>
        </div>
    </body>

</html>