Skip to main content

The Author component was designed to help readers identify who wrote the content and when. Options include adding the author’s name, a profile picture, and the date and time of publication. Styling options are limited to spacing adjustments.

Example

Example Author

Aug 16, 2024 2:20 PM

Content Options

This component has an Author Avatar

This component has no Author Avatar

This has an Author Name

Aug 16, 2024 2:20 PM

This has a Date

Aug 16, 2024 2:20 PM

This has no Date

Layout and Styling Options

Bottom Margin

Bottom Margin: None

Bottom Margin: X-Small

Bottom Margin: Small

Bottom Margin: Medium

Bottom Margin: Large

Bottom Margin: X-Large

the end

Top Margin

Top Margin: None

Top Margin: X-Small

Top Margin: Small

Top Margin: Medium

Top Margin: Large

Top Margin: X-Large

the end

Usage

Do

  • Ensure the author’s name is correctly spelled and accurately reflects the person who wrote the content.
  • Use a professional profile picture that represents the author well.
  • If appropriate, include the date and time to inform readers when the content was published or last updated.
  • Make sure the component’s design aligns with the overall style of your website or article.

Don't

  • Avoid using low-resolution or blurry profile pictures as they can appear unprofessional.
  • Don’t forget to update the author’s information if there’s a change in the author or their profile.
  • Don’t use generic or placeholder names like “Admin” unless it’s absolutely necessary.
  • Refrain from using images with distracting backgrounds or irrelevant elements.

Accessibility

  • Since the author’s name is displayed directly next to the image, there’s no need for alt text, as the name itself provides the necessary context for accessibility.