Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Components

  • Components Hub
  • Content
  • Table
  • Display
  • VAvatar
  • VAvatarStack
  • VBlock
  • VIconBox
  • VIconWrap v1.1
  • VSnack v1.1
  • VTag
  • Layout
  • VFlex & VFlexItemv2.0
  • VGrid & VGridItemv2.0
  • VBreadcrumb
  • VTabs v1.1
  • VFlexPagination
  • VMarkdownPreview v2.6
  • VMarkdownEditor v2.6
  • VFlexTable v2.2
  • Accordions
  • Cards
  • Placeholders
  • Plugins

Select Language

Activity

  • Team
  • Projects
  • Schedule
Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer projectgetslicer.io
31%
5 / 24
Metamovies reworkedmetamovies.co
84%
28 / 31
Fast Pizza redesignfastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Recently viewed

Browser SupportBlog post
Twitch APIBlog post
Browser SupportBlog post

Recent Members

Alice C.San Diego, CASoftware EngineerThis is a nice user description that we can use as demo content.
Alice C.Software Engineer
Tara S.New York, NYUI/UX DesignerThis is a nice user description that we can use as demo content.
Tara S.UI/UX Designer
Dwayne H.Los Angeles, CAProduct ManagerThis is a nice user description that we can use as demo content.
Jimmy H.Project Manager

Task Details

Overview

Build a desktop and mobile landing page wireframe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videmus igitur ut conquiescere ne infantes quidem possint. Duo Reges: constructio interrete... See More

Participants

Statistics

5 days
3 files
54
Add Checklist

Files

Preliminary Sketches3MB 5 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file
Project Budget0.6MB 8 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file
POC Demo8.75MB 8 days ago
DownloadDownload this file
View TaskView related task

UpdateUpload a new version
DeleteDelete this file

Messages

Send

Welcome

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Components
  • VAvatar

VAvatar

Vuero <VAvatar /> components are rounded images used for media and personal pages. Avatar sizes can be controled with 'size' prop. Available size prop values small, medium, large, big and xl. See code for more details about usage.

Squared avatar

Avatars can have a square shape instead of a circle shape by adding the squared prop to the avatar component. See code for more details about usage.

Fallback avatar

Vuero Avatars automatically fall back to a placeholder when no valid URL is provided for the picture prop.

Avatar dot

Avatars can have a small dot attached to them, if you'd like to show a user status for example. Add the dot prop to the target avatar component. See code for more details about usage.

Squared dot

Avatars can have a small dot attached to them, if you'd like to show a user status for example. Add the dot prop to the target avatar component. See code for more details about usage.

Dot colors

Avatar dots can have different colors. Set the dotColor prop to primary, info, warning, danger or grey to change the dot color. See code for more details about usage.

Avatar badge

Vuero avatars can have badge images attached to them. Simply add a 1:1 ratio image URL to the avatar component using the badge prop.

Fake avatar

When the provided picture URL is null, the avatar component falls back to a fake avatar. Same size mofifiers are available. Use the initials prop to pass initials to the component. See the code examples for more details about usage.

CT
CT
CT
CT
CT
CT

Fake squared

When the provided picture URL is null, the avatar component falls back to a fake avatar. Same size mofifiers are available. Use the initials prop to pass initials to the component. See the code examples for more details about usage.

CT
CT
CT
CT
CT
CT

Fake badge

When the provided picture URL is null, the avatar component falls back to a fake avatar. Fake avatars can also have badges. See the code examples for more details about usage.

CT
CT
CT
CT
CT
CT

Fake avatar colors

Fake avatars can have different colors to break monotony. You can change the avatar color passing one of the following values to the color prop: primary, success, info, warning, danger, h-purple, h-orange, h-blue, h-green, h-red, h-yellow. Supports dark mode.

CT
CT
CT
CT
CT
CT
CT
CT
CT
CT
CT
CT

Fake squared colors

Fake avatars can have different colors to break monotony. You can change the avatar color passing one of the following values to the color prop: primary, success, info, warning, danger, h-purple, h-orange, h-blue, h-green, h-red, h-yellow. Supports dark mode.

CT
CT
CT
CT
CT
CT
CT
CT
CT
CT
CT
CT

VAvatar Props

Here is the full props available for <VAvatar /> component:

PropsDefaultType
pictureundefinedstring
pictureDarkundefinedstring
badgeundefinedstring
placeholderhttps://via.placeholder.com/50x50string
initials?string
sizeundefinedsmall, medium, large, big, xl
colorundefinedprimary, success, info, warning, danger, h-purple, h-orange, h-blue, h-green, h-red, h-yellow
dotColorundefinedprimary, success, info, warning, danger, grey
squaredfalseboolean
dotfalseboolean

VAvatar Slots

Here is the full slots available for <VAvatar /> component:

SlotPropertiesDescription
#avatarnullMain avatar content
#badgenullBadge content