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.
Live Example
This example shows the card component with all possible options. Most of these options can be turned on or off depending on the content, look, and feel of the information the will be included. See the documentation below the example for more information about the options and variations that are available.
Options and Variations
Text and Image Options
The author component has three options. These options are all can be used in any combination with each other. These options are:
- Avatar image
- Author name
- Date published
Top and Bottom Margin
There are multiple settings to adjust the space above and below the author component.
Bottom Margins
This is no bottom margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is an x-small bottom margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a small bottom margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a medium bottom margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a large bottom margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a x-large bottom margin applied to author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
Top Margins
This is no top margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a x-small top margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a small top margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a medium top margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a large top margin applied to this author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
This is a x-large top margin applied to author component. Donec tincidunt dapibus purus id dignissim. Aliquam neque ex, interdum ut suscipit sit amet, pellentesque eget ex.
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...
- Use low-resolution or blurry profile pictures as they can appear unprofessional.
- Forget to update the author’s information if there’s a change in the author or their profile.
- Use generic or placeholder names like “Admin” unless it’s absolutely necessary.
- Use 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.