Skip to main content

Avatar Component

credit

Thanks to Docux (Juniors017) for creating this component and sharing it with us.

The Infima CSS framework provides a set of utility classNames that can be used to stylize avatar in Docusaurus. This article will cover how to create a reusable avatar component for your Docusaurus site which can be personalized with different colors, orientations and sizes. The component will create all the avatar design available in Infima and "Custom" disposition, you will be able to create and personalize each avatar independently of each other

Docusaurus uses the Infima framework for styling layout. The components described here are fully based on the Infima avatar system. More detail on the Infima avatar can be found in the Infima docs

Docusaurus Documentation: Styling your site with Infima

The component is in fact a set of small components that will admit to form the Avatar.

Avatar : composition of the master folder

AvatarContainer (The container of alls parts)
AvatarImage component (Image parts of Avatar)
AvatarIntro component (Intro parts of Avatar)
AvatarName component (Name parts of Avatar)
AvatarSubtitle component (Subtitle parts of Avatar)

We will discover that it pairs wonderfully with other components present in our library but this will be the subject of a dedicated page.

Creating the Avatar component

Think of this component as the container of all Avatar parts

First we will create the master folder in: \src\components\Avatar\. Next we will start by creating a new component called Avatar. It will be the container component of our different parts to come. Also this will give the possibility to manage className and style for each part.

The component will accept the following props:

vertical: if you want to change orientation.

Creating the file and adding the source code for the component.

JS
TS

\src\components\Avatar\AvatarContainer\index.js
import React,  { CSSProperties } from 'react';
import clsx from 'clsx'; 

const AvatarContainer = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  vertical = false, // Default to false for vertical position
  
}) => {   
  const avatarPosition = vertical ? `avatar--vertical` :'';
  
  return (
    <div className={clsx(
          "avatar", 
          className,  
          avatarPosition
        )} 
        
        style={style}>
   
    {children}
  </div>
  );
}

export default AvatarContainer ;
  

\src\components\Avatar\AvatarContainer\index.tsx
import React, { CSSProperties, ReactNode } from 'react';
import clsx from 'clsx';

interface AvatarContainerProps {
  className?: string; // Custom classes for the component
  style?: CSSProperties; // Custom styles for the component
  children: ReactNode; // Content of the component
  vertical?: boolean; // Option for vertical position
}

const AvatarContainer: React.FC<AvatarContainerProps> = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  vertical = false, // Default to false for vertical position
}) => {   
  const avatarPosition = vertical ? 'avatar--vertical' : '';

  return (
    <div className={clsx(
          "avatar", 
          className, 
          avatarPosition
        )} 
        
        style={style}>

      {children}
    </div>
  );
}

export default AvatarContainer;

Creating the AvatarImage component

Think of this component as the image of your futurs avatar element. Creating the file and adding the source code for the component.The component will accept the following props:

avatarImageUrl: The url of your image
avatarSize: The option for avatar image size
alt: The alt image text
title: The title of image
link: The option is for add link on your image, if link = true the component add link code and add Infima className avatar__photo-link
destination: The option is if link is true for add url of link

Creating the file and adding the source code for the component.

JS
TS

\src\components\Avatar\AvatarImage\index.js
import React, { CSSProperties } from 'react';
import clsx from 'clsx'; 
import useBaseUrl from '@docusaurus/useBaseUrl'; // Import the useBaseUrl function from Docusaurus for generate valide image url

const AvatarImage = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  avatarImageUrl, // URL of the avatar image
  alt, // Alt text for the image
  title, // Title text for the image
  link = false, // Default to false Determines if the image should be a link
  destination = '#', // Link URL if link = true, default value if destination is not provided
  avatarSize, // Size class for the avatar image
}) => {   

  const generatedAvatarUrl = useBaseUrl(avatarImageUrl);
  const avatarimagesize = avatarSize ? `avatar__photo--${avatarSize}` :'';
  const imgElement = (

    <img
      className={clsx(
        "avatar__photo", 
        className, 
        avatarimagesize
      )} 
      
      style={style}

      src={generatedAvatarUrl} 
      alt={alt} 
      title={title} />

  );

  return link ? (
    <a
      className="avatar__photo-link "
      href={destination}>
      {imgElement}
    </a>
  ) : (
    imgElement
  );
};

export default AvatarImage;
  

\src\components\Avatar\AvatarImage\index.tsx
import React, { CSSProperties } from 'react';
import clsx from 'clsx'; 
import useBaseUrl from '@docusaurus/useBaseUrl'; // Import the useBaseUrl function from Docusaurus for generate valide image url

interface AvatarImageProps {
  className?: string; // Custom classes for the component
  style?: CSSProperties; // Custom styles for the component
  avatarImageUrl: string; // URL of the avatar image
  alt: string; // Alt text for the image
  title?: string; // Title text for the image
  link?: boolean; // Determines if the image should be a link
  destination?: string; // Link URL if link = true
  avatarSize?: string; // Size class for the avatar image
}

const AvatarImage: React.FC<AvatarImageProps> = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  avatarImageUrl, // URL of the avatar image
  alt, // Alt text for the image
  title, // Title text for the image
  link = false, // Default to false Determines if the image should be a link
  destination = '#', // Link URL if link = true, default value if destination is not provided
  avatarSize, // Size class for the avatar image
}) => {   
  const generatedAvatarUrl = useBaseUrl(avatarImageUrl);
  const avatarImageSizeClass = avatarSize ? `avatar__photo--${avatarSize}` : '';
  
  const imgElement = (
    <img
      className={clsx(
        "avatar__photo", 
        className, 
        avatarImageSizeClass
      )}

      style={style}
      src={generatedAvatarUrl}
      alt={alt}
      title={title}

    />
  );

  return link ? (
    <a className="avatar__photo-link" href={destination}>
      {imgElement}
    </a>
  ) : (
    imgElement
  );
};

export default AvatarImage;

Creating the AvatarIntro component

Think of this component as the container of name and subtitle for your futurs avatar element. Creating the file and adding the source code for the component. The component will accept the following props:

textAlign: The option for text alignment left right center justify
variant: (optional)This will be used to apply different colors to the text based on the Infima CSS utility classNames.
italic: Default value is false, it's for italic text render
noDecoration: Default value is false, it's for delete text decoration
transform: The option for transform text to UPPERCASE TEXT lowercase text or Capitalize Text
breakWord: The option for break text, the text will break at the a word boundary so it will not break in the middle of a word.
truncate: The option is for very long text that will be truncated if there is not enough space to display it in a single line on the screen. It's truncated by adding...
weight: The option for text weight Bold Semibold Normal Light

Creating the file and adding the source code for the component.

JS
TS

\src\components\Avatar\AvatarIntro\index.js
import React,  { CSSProperties } from 'react';
import clsx from 'clsx'; 


const AvatarIntro = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  textAlign, // Text alignment 
  variant, // Variant for text color 
  italic = false, // Default to false for italic text
  noDecoration = false, // Default to false for no decoration
  transform, // Text transform option 
  breakWord = false, // Default to false for break words
  truncate = false, // Default to false for truncate
  weight, // Weight of the text 
}) => {   

  const textAlignClass = textAlign ? `text--${textAlign}` :'';
  const textColor = variant ? `text--${variant}` : '';
  const textItalic = italic ? 'text--italic' : '';
  const textDecoration = noDecoration ? 'text-no-decoration' : '';
  const textType = transform ? `text--${transform}` : '';
  const textBreak = breakWord ? 'text--break' : '';
  const textTruncate = truncate ? 'text--truncate' : '';
  const textWeight = weight ? `text--${weight}` : '';
  
  return (
  
    <div className={clsx(
        "avatar__intro", 
        className, 
        textAlignClass, 
        textType, 
        textColor, 
        textItalic, 
        textDecoration, 
        textBreak, 
        textTruncate, 
        textWeight
    )} 

    style={style}
    >
     {children}

    </div>

  );
}

export default AvatarIntro ;

\src\components\Avatar\AvatarIntro\index.tsx
import React, { CSSProperties, ReactNode } from 'react';
import clsx from 'clsx'; 

interface AvatarIntroProps {
  className?: string; // Custom classes for the component
  style?: CSSProperties; // Custom styles for the component
  children: ReactNode; // Content of the component
  textAlign?: 'left' | 'center' | 'right'; // Text alignment options
  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
  italic?: boolean; // Determines if the text is italic
  noDecoration?: boolean; // Determines if the text has no decoration
  transform?: string; // Text transform option
  breakWord?: boolean; // Determines if the text breaks words
  truncate?: boolean; // Determines if the text is truncated
  weight?: string; // Weight of the text 
}

const AvatarIntro: React.FC<AvatarIntroProps> = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  textAlign, // Text alignment 
  variant, // Variant for text color or style
  italic = false, // Default to false for italic text
  noDecoration = false, // Default to false for no decoration
  transform, // Text transform option
  breakWord = false, // Default to false for break words
  truncate = false, // Default to false for truncate
  weight, // Weight of the text 
}) => {   

  const textAlignClass = textAlign ? `text--${textAlign}` : '';
  const textColor = variant ? `text--${variant}` : '';
  const textItalic = italic ? 'text--italic' : '';
  const textDecoration = noDecoration ? 'text-no-decoration' : '';
  const textType = transform ? `text--${transform}` : '';
  const textBreak = breakWord ? 'text--break' : '';
  const textTruncate = truncate ? 'text--truncate' : '';
  const textWeight = weight ? `text--${weight}` : '';
  
  return (
    <div 
      className={clsx(
          "avatar__intro",
          className,
          textAlignClass,
          textType,
          textColor,
          textItalic,
          textDecoration,
          textBreak,
          textTruncate,
          textWeight
      )}
      style={style}
    >
      {children}
    </div>
  );
}

export default AvatarIntro;

Creating the AvatarName component

Think of this component as the Name or pseudonym of your futurs avatar element. Creating the file and adding the source code for the component. The component will accept the following props:

textAlign: The option for text alignment left right center justify
variant: (optional)This will be used to apply different colors to the text based on the Infima CSS utility classNames.
italic: Default value is false, it's for italic text render
noDecoration: Default value is false, it's for delete text decoration
transform: The option for transform text to UPPERCASE TEXT lowercase text or Capitalize Text
breakWord: The option for break text, the text will break at the a word boundary so it will not break in the middle of a word.
truncate: The option is for very long text that will be truncated if there is not enough space to display it in a single line on the screen. It's truncated by adding...
weight: The option for text weight Bold Semibold Normal Light

Creating the file and adding the source code for the component.

JS
TS

\src\components\Avatar\AvatarName\index.js
import React,  { CSSProperties } from 'react';
import clsx from 'clsx'; // Assurez-vous d'avoir clsx installé et importé correctement


const AvatarName = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  textAlign, // Text alignment 
  variant, // Variant for text color or style
  italic = false, // Default to false for italic text
  noDecoration = false, // Default to false for no decoration
  transform, // Text transform option
  breakWord = false, // Default to false for break words
  truncate = false, // Default to false for truncate
  weight, // Weight of the text 
  }) => {   
    const textAlignClass = textAlign ? `text--${textAlign}` :'';
    const textColor = variant ? `text--${variant}` : '';
    const textItalic = italic ? 'text--italic' : '';
    const textDecoration = noDecoration ? 'text-no-decoration' : '';
    const textType = transform ? `text--${transform}` : '';
    const textBreak = breakWord ? 'text--break' : '';
    const textTruncate = truncate ? 'text--truncate' : '';
    const textWeight = weight ? `text--${weight}` : '';
  return (
  
    <div className={clsx(
        "avatar__name", 
        className, 
        textAlignClass, 
        textType, 
        textColor, 
        textItalic, 
        textDecoration, 
        textBreak, 
        textTruncate, 
        textWeight
    )} 
    style={style}>

     {children}
    </div>

  );
}

export default AvatarName ;

\src\components\Avatar\AvatarName\index.tsx
import React, { CSSProperties, ReactNode } from 'react';
import clsx from 'clsx'; 

interface AvatarNameProps {
  className?: string; // Custom classes for the component
  style?: CSSProperties; // Custom styles for the component
  children: ReactNode; // Content of the component
  textAlign?: 'left' | 'center' | 'right'; // Text alignment options
  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
  italic?: boolean; // Determines if the text is italic
  noDecoration?: boolean; // Determines if the text has no decoration
  transform?: string; // Text transform option 
  breakWord?: boolean; // Determines if the text breaks words
  truncate?: boolean; // Determines if the text is truncated
  weight?: string; // Weight of the text
}

const AvatarName: React.FC<AvatarNameProps> = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  textAlign, // Text alignment 
  variant, // Variant for text color or style
  italic = false, // Default to false for italic text
  noDecoration = false, // Default to false for no decoration
  transform, // Text transform option
  breakWord = false, // Default to false for break words
  truncate = false, // Default to false for truncate
  weight, // Weight of the text 
}) => {   
  const textAlignClass = textAlign ? `text--${textAlign}` : '';
  const textColor = variant ? `text--${variant}` : '';
  const textItalic = italic ? 'text--italic' : '';
  const textDecoration = noDecoration ? 'text-no-decoration' : '';
  const textType = transform ? `text--${transform}` : '';
  const textBreak = breakWord ? 'text--break' : '';
  const textTruncate = truncate ? 'text--truncate' : '';
  const textWeight = weight ? `text--${weight}` : '';
  
  return (
    <div 
      className={clsx(
        "avatar__name", 
        className, 
        textAlignClass, 
        textType, 
        textColor, 
        textItalic, 
        textDecoration, 
        textBreak, 
        textTruncate, 
        textWeight
      )} 
      style={style}
    >
      {children}
    </div>
  );
}

export default AvatarName;

Creating the AvatarSubtitle component

Think of this component as the Subtitle (for exemple : Company Position at the company or bio) of your futurs avatar element. Creating the file and adding the source code for the component. The component will accept the following props:

textAlign: The option for text alignment left right center justify
variant: (optional)This will be used to apply different colors to the text based on the Infima CSS utility classNames.
italic: Default value is false, it's for italic text render
noDecoration: Default value is false, it's for delete text decoration
transform: The option for transform text to UPPERCASE TEXT lowercase text or Capitalize Text
breakWord: The option for break text, the text will break at the a word boundary so it will not break in the middle of a word.
truncate: The option is for very long text that will be truncated if there is not enough space to display it in a single line on the screen. It's truncated by adding...
weight: The option for text weight Bold Semibold Normal Light

Creating the file and adding the source code for the component.

JS
TS

\src\components\Avatar\AvatarSubtitle\index.js
import React,  { CSSProperties } from 'react';
import clsx from 'clsx'; 


const AvatarSubtitle = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  textAlign, // Text alignment
  variant, // Variant for text color or style
  italic = false, // Default to false for italic text
  noDecoration = false, // Default to false for no decoration
  transform, // Text transform option
  breakWord = false, // Default to false for break words
  truncate = false, // Default to false for truncate
  weight, // Weight of the text 
  }) => {   
    const text = textAlign ? `text--${textAlign}` :'';
    const textColor = variant ? `text--${variant}` : '';
    const textItalic = italic ? 'text--italic' : '';
    const textDecoration = noDecoration ? 'text-no-decoration' : '';
    const textType = transform ? `text--${transform}` : '';
    const textBreak = breakWord ? 'text--break' : '';
    const textTruncate = truncate ? 'text--truncate' : '';
    const textWeight = weight ? `text--${weight}` : '';
  return (
  
    <small  className={clsx(
          "avatar__subtitle", 
          className,
          text, 
          textType, 
          textColor, 
          textItalic, 
          textDecoration, 
          textBreak, 
          textTruncate, 
          textWeight
        )} 
        style={style}>

    <> {children}</>
    </small >

  );
}


export default AvatarSubtitle ;

\src\components\Avatar\AvatarSubtitle\index.tsx
import React, { CSSProperties, ReactNode } from 'react';
import clsx from 'clsx'; 

interface AvatarSubtitleProps {
  className?: string; // Custom classes for the component
  style?: CSSProperties; // Custom styles for the component
  children: ReactNode; // Content of the component
  textAlign?: 'left' | 'center' | 'right'; // Text alignment options
  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'link' | string;
  italic?: boolean; // Determines if the text is italic
  noDecoration?: boolean; // Determines if the text has no decoration
  transform?: string; // Text transform option 
  breakWord?: boolean; // Determines if the text breaks words
  truncate?: boolean; // Determines if the text is truncated
  weight?: string; // Weight of the text
}

const AvatarSubtitle: React.FC<AvatarSubtitleProps> = ({
  className, // Custom classes for the component
  style, // Custom styles for the component
  children, // Content of the component
  textAlign, // Text alignment
  variant, // Variant for text color or style
  italic = false, // Default to false for italic text
  noDecoration = false, // Default to false for no decoration
  transform, // Text transform option
  breakWord = false, // Default to false for break words
  truncate = false, // Default to false for truncate
  weight, // Weight of the text 
}) => {   
  const textAlignClass = textAlign ? `text--${textAlign}` : '';
  const textColor = variant ? `text--${variant}` : '';
  const textItalic = italic ? 'text--italic' : '';
  const textDecoration = noDecoration ? 'text-no-decoration' : '';
  const textType = transform ? `text--${transform}` : '';
  const textBreak = breakWord ? 'text--break' : '';
  const textTruncate = truncate ? 'text--truncate' : '';
  const textWeight = weight ? `text--${weight}` : '';
  
  return (
    <small
      className={clsx(
        "avatar__subtitle",
        className,
        textAlignClass,
        textType,
        textColor,
        textItalic,
        textDecoration,
        textBreak,
        textTruncate,
        textWeight
      )}
      style={style}
    >
      {children}
    </small>
  );
}

export default AvatarSubtitle;

MDX Component Scope

To follow the Docusaurus documentation, we create a theme folder that will host the MDXComponents file. This gives us src\theme\MDXComponents.*. You may already have a src\theme folder or an MDXComponents file if so - merge the changes described here with yours.

Docusaurus Documentation: MDX Component Scope

JS
TS

src\theme\MDXComponents.js
  import React from 'react';
  // Importing the original mapper + our components according to the Docusaurus doc
  import MDXComponents from '@theme-original/MDXComponents';
  import AvatarContainer from '@site/src/components/Avatar/AvatarContainer';
  import AvatarImage from '@site/src/components/Avatar/AvatarImage';
  import AvatarIntro from '@site/src/components/Avatar/AvatarIntro';
  import AvatarName from '@site/src/components/Avatar/AvatarName';
  import AvatarSubtitle from '@site/src/components/Avatar/AvatarSubtitle';
    

  export default {
    // Reusing the default mapping
    ...MDXComponents,
    AvatarContainer, 
    AvatarImage,
    AvatarIntro,
    AvatarName,
    AvatarSubtitle,
  };

src\theme\MDXComponents.tsx


  import React from 'react';
  // Importing the original mapper + our components according to the Docusaurus doc
  import MDXComponents from '@theme-original/MDXComponents';
  import AvatarContainer from '@site/src/components/Avatar/AvatarContainer';
  import AvatarImage from '@site/src/components/Avatar/AvatarImage';
  import AvatarIntro from '@site/src/components/Avatar/AvatarIntro';
  import AvatarName from '@site/src/components/Avatar/AvatarName';
  import AvatarSubtitle from '@site/src/components/Avatar/AvatarSubtitle';


  export default {
    // Reusing the default mapping
    ...MDXComponents,
    AvatarContainer, 
    AvatarImage,
    AvatarIntro,
    AvatarName,
    AvatarSubtitle, 
  };

Using the Avatar Component in an MDX File

Avatar classic horizontal

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<AvatarContainer>  
<AvatarImage avatarSize='lg' avatarImageUrl="https://avatars.githubusercontent.com/u/97809069?v=4" link destination='https://github.com/Juniors017'/>
<AvatarIntro>
<AvatarName style={{color:'white'}} > Docux </AvatarName>
<AvatarSubtitle  className='primary'>humble contributor on :   <a style={{ color:'white'}}  href="https://docusaurus.community/">@Doc.Community</a></AvatarSubtitle>
</AvatarIntro>
</AvatarContainer>

Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Docux

humble contributor on : @Doc.Community

Avatar type post horizontal

<AvatarContainer>  
<AvatarImage avatarSize='xs' avatarImageUrl="https://avatars.githubusercontent.com/u/97809069?v=4" link destination='https://github.com/Juniors017'/>
<AvatarIntro>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<AvatarName style={{color:'white'}} > Docux </AvatarName>
<AvatarSubtitle  className='primary'>humble contributor on :   <a style={{ color:'white'}}  href="https://docusaurus.community/">@Doc.Community</a></AvatarSubtitle>
</AvatarIntro>
</AvatarContainer>

Lorem ipsum dolor sit amet, eprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Docux

humble contributor on : @Doc.Community

Avatar classic vertical

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<AvatarContainer vertical>  
<AvatarImage  avatarSize='lg' avatarImageUrl="https://avatars.githubusercontent.com/u/97809069?v=4" link destination='https://github.com/Juniors017'/>
<AvatarIntro>
<AvatarName className='text--info' > Docux </AvatarName>
<AvatarSubtitle  className='text--primary'>humble contributor on :   <a style={{ color:'white'}}  href="https://docusaurus.community/">@Doc.Community</a></AvatarSubtitle>
</AvatarIntro>
</AvatarContainer>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Docux

humble contributor on : @Doc.Community

Various styles

<AvatarContainer vertical>  
<AvatarIntro>
<AvatarName className='text--danger' > Docux </AvatarName>
<AvatarSubtitle  className='text--danger'>humble contributor on :   <a style={{ color:'white'}}  href="https://docusaurus.community/">@Doc.Community</a></AvatarSubtitle>
</AvatarIntro>
<AvatarImage  avatarSize='xs' avatarImageUrl="https://avatars.githubusercontent.com/u/97809069?v=4" link destination='https://github.com/Juniors017'/>
</AvatarContainer>

Docux

humble contributor on : @Doc.Community

<AvatarContainer className='padding-vert--lg' > 
<AvatarIntro>
<AvatarName className='text--warning' > Docux </AvatarName>
</AvatarIntro>
<AvatarImage  avatarSize='xl' avatarImageUrl="https://avatars.githubusercontent.com/u/97809069?v=4" link destination='https://github.com/Juniors017'/>
</AvatarContainer>

Docux

<AvatarContainer vertical>  
<AvatarIntro>
<AvatarImage  avatarSize='xs' avatarImageUrl="https://avatars.githubusercontent.com/u/97809069?v=4" link destination='https://github.com/Juniors017'/>
<AvatarName className='text--warning' >Docux</AvatarName>
</AvatarIntro>
</AvatarContainer>

Docux

Various sizes

Docux

humble contributor on : @Doc.Community

Docux

humble contributor on : @Doc.Community

Docux

humble contributor on : @Doc.Community

Avatar : composition of the master folder
Creating the Avatar component
Creating the AvatarImage component
Creating the AvatarIntro component
Creating the AvatarName component
Creating the AvatarSubtitle component
MDX Component Scope
Using the Avatar Component in an MDX File