Assemble the card

Combine the avatar and info list into a ProfileCard component.

Assemble the card

In the last step you'll combine the Avatar and InfoList components inside ProfileCard. This is the final step of the project.

ProfileCard calls Avatar first, then InfoList, inside an <article className="card">. The two small components form a single card.

This structure lets you change Avatar or InfoList independently without touching ProfileCard.

Order of combination

ProfileCard calls the two components in order: Avatar first, then InfoList. This order sets the visual layout: name on top, info below.

Changing the call order changes the card's look. If info comes first, you get a different profile card.

In this project we want Avatar on top, so we call it first.

Exercise ProfileCard combination

Complete the skeleton. Write a component called ProfileCard that calls <Avatar /> and <InfoList /> inside <article className="card">. Don't forget to export.

Show example solution

function ProfileCard() {
  return <article className="card"><Avatar /><InfoList /></article>;
}

export default ProfileCard;

Test yourself

What does ProfileCard call?
- Only p
- Only Header
- Only Footer
- Avatar and InfoList
Show answer

Avatar and InfoList — ProfileCard calls Avatar and InfoList.

Card wrapper

ProfileCard is held inside an ____.

Show answer

ProfileCard is held inside an article.

The whole project

Avatar

Name and role
InfoList

Info list
ProfileCard

Combination
article

Wrapper

Next lesson: What are props?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies