Adding the Author Component

Adding an Author component can help us reference the author on several pages across a site, establishing credibility and showcasing that information has been created by an experienced person and not autogenerated by AI. In this lesson, we’ll take a look at how we can create a reusable, responsive Author component and what necessary information to include.

Creating the Author component

In the following code widget, we already have an empty Author component. To create the base for the component, open the file and create a new section element under h2 and add the following two elements inside it:

• div: Create a div element with a class of .author-info and leave it empty for now. This is where we’re going to add a profile picture as well as the name and the role of our author.

• p: Inside the paragraph, reference author.about. Make sure to import the author object from the configuration file at the top of the component.