Avatar
Usage
The constructor creates a display format showcasing an avatar that represents a project member, including links to their social media profiles.
Basic
::ShAvatar
---
srcAvatar: https://avatars.githubusercontent.com/u/3258579?v=4
altAvatar: JPC
name: |
Joaquin Prado
role: |
Co-Founder
company: |
Standards-Hub
linkedin: https://www.linkedin.com/in/jpradocueva/
facebook: https://www.linkedin.com/in/jpradocueva/
instagram: https://www.linkedin.com/in/jpradocueva/
twitter: https://www.linkedin.com/in/jpradocueva/
---
::
Advanced settings
An example with customized ui attributes for enhanced display:
::ShAvatar
---
ui:
wrapper: shadow-xl # provide a shadow around the wrapper
name: text-3xl # controls text font, size and color
role: text-2xl
company: text-xl
icon: hover:text-blue-800 dark:hover:text-blue-400
# twitter, facebook, linkedin & instagram are props for links, so no visual effects can be added here
srcAvatar: https://avatars.githubusercontent.com/u/3258579?v=4
altAvatar: JPC
name: |
Joaquin Prado
role: |
Co-Founder
company: |
Standards-Hub
linkedin: https://www.linkedin.com/in/jpradocueva/ #link to social media source
facebook: https://www.linkedin.com/in/jpradocueva/
instagram: https://www.linkedin.com/in/jpradocueva/
twitter: https://www.linkedin.com/in/jpradocueva/
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
srcAvatar | string | "" | The source URL of the avatar image to be displayed. |
altAvatar | string | "" | Alternative text for the avatar image, used for accessibility and in case the image fails to load. |
name | string | "" | The name of the person to be displayed. |
role | string | "" | The role or position of the person within the company. |
company | string | "" | The name of the company the person is associated with. |
twitter | string | "" | URL link to the person's Twitter profile. |
linkedin | string | "" | URL link to the person's LinkedIn profile. |
facebook | string | "" | URL link to the person's Facebook profile. |
instagram | string | "" | URL link to the person's Instagram profile. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | grid grid-cols-2 gap-4 p-4 mx-auto w-fit dark:bg-inherit rounded-md | Defines the overall styling for the container that holds all the elements of the avatar. The attribute `shadow-xl` is used to provide a shadow effect around the wrapper. |
avatar | my-[2em] grayscale justify-self-end tracking-widest rounded-full size-48 border border-neutral-300 dark:border-neutral-700 | Styles applied to the avatar image itself, including properties like grayscale effect, rounded shape, and size. |
base | "" | A placeholder for additional base styles that can be applied to the avatar component. |
name | text-2xl md:text-3xl font-semibold grow text-neutral-900 dark:text-neutral-100 bottom-0 | Styles applied to the text displaying the name of the person, such as font size and color. |
role | text-lg font-semibold text-neutral-700 -mt-4 dark:text-gray-400 | Styles applied to the text displaying the role or position of the person. |
company | text-lg text-neutral-500 tracking-wide -mt-5 dark:text-neutral-400 | Styles applied to the text displaying the company name of the person. |
FAQs
Q: What are these style properties (base, socials, icon, avatar) and how can we manipulate them?
We can manipulate all four of these through the ui styling (ui.base, ui.socials, ui.icon & ui.avatar). These are some examples of how some effects will be displayed targeting different class:
- ui.base
Here and in the next class, ui.socials, we will just color the background of what is wrapped by them, so you will have a visual representation that may give you some ideas on how you can manipulate these classes further
Note: The values for styling of the base have no default style since they have a minor impact on the overall looks. However, it is a good option to have if we want to add some padding, margins, translate or anything else to the colored section on the picture below.
- ui.socials
Here is the visual representation of what is wrapped by ui.socials
- ui.icon
Here we can add a certain color (we have added hover:text-primary) to the icons that will take place, in this case when we hover over them (see Facebook icon)
- ui.avatar
Here we can also apply some styles, but since we used grayscale for color of avatar, we are limited with colors. So here, we have added some shadow below avatar (drop-shadow-2xl)
Q: What is Nuxt?
It is a progressive Vue framework
