challenges
July 11, 2024
[
Dev W rkshop
]

React Components: Part 4

Workshops in this series

  1. Setup: files and shadows
  2. Props and TypeScript
  3. Delegated props
  4. Variants: Button component
  5. Centering: Card component
  6. Animations: loading spinner

Prerequisites

Workshop context

Before this workshop

  • The previous workshops in this series have covered setup and props for the components.

This workshop

  • This workshop handles styling for the Card component.

After this workshop

  • Future workshops in this series will complete the Button and Loading components.
  • And, as a reminder, this series (React Components) builds low-level components (Button, Card and Spinner) for an application.
    • The application itself will be created in the next two series, Next.js Data Fetching and AI Style Generator .
    • For context, at the end of the AI Style Generator series, the application will look like this. You can see the Button variants in the upper part, and a turquoise Card in the lower part.
    UI with options to enter a quote, submit the quote, clear the quote or generate a random quote. A styled quote is shown beneath the form.

Workshop goal

By the end of this workshop

  • The Card component will display styles that match this Figma document .
    • Note: to examine the details of the design, you will need to log in to Figma. You can log in via Google or create a free account.
  • The font and background colors for the card will be determined by the Card props values (you can ignore the colors in the Figma document).
  • The card should take up 100% of its container’s width.
  • If there’s one line of content, that line should be centered horizontally within the card. More than one line of content should be left-aligned.
    • Here’s an example of one card with long text, followed directly by one card with short text:
    Screenshot of two Card components, one with a purple background and two lines of light blue text, and one with a cream-colored background and two words of centered maroon-colored text

Hints

Hint 1 You will need to be logged in to Figma to examine the design as described below. You can log in via Google or create a free account.

To determine padding values, you can use Figma tools to find distances between the text and the surrounding card container. Instructions from the Figma Docs :

  1. Select the first object in the canvas.
  2. Hold down the modifier key:
    • Mac: ⌥ Option
    • Windows: Alt
  3. Hover over the second object.
  4. Figma will display a red line between the two objects, as well as horizontal and vertical measurements.

The resulting screen will look something like this:

Card mock-up with text selected, showing distances between the text and the card edges

Hint 2 You will need to be logged in to Figma to examine the design as described below. You can log in via Google or create a free account.

To find the the radius of the rounded corners, select a card rectangle and look at the properties panel on the right:

Card mock-up with background selected, showing corner radius

Hint 3 If you need a refresher on the shadows we created in workshop 1 of this series and how to use them, see this challenge solution .

Hint 4 Take a look at the React docs for the style attribute in React. (You can skip the initial part about className and go straight to the part about the style attribute).

Hint 5 For the centering requirement, you can use a grid layout with place-content set to center. This will automatically center content shorter than one line (since that element will have a width equal to the length of the content) and keep content left-aligned if it’s longer than one line (since the place-content will apply to the entire text element, and not each individual line).

Hint 6 To see whether your styles are behaving as you expect, you can add Card components with content of different length to the Home component in src/app/page.tsx file (this the component rendered when you load http://localhost:3000). You can remove the Card components from page.tsx once you’re satisfied the card is styled correctly.

Note: the Card styling does not need to include margins. In general, it is the responsibility of the parent to determine the layout of its children relative to one another, not the responsibility of the children components themselves. The spacing relative to other elements is likely to change depending on the parent layout.

Resources

Go to solution and explanation