Create Card Component

[bmuenzenmeyer]

Create a Card component using the figma design (direct link).

This component is a card that previews other content, usually a blog post.

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide

• Create a new directory called Card within the Common directory that contains all the new code.
• Use the new Preview component introduced within Create Preview Component #6011
• Use the new AvatarGroup component introduced within Create AvatarGroup Component #5910
• Use the new tailwind color and typography system to assign properties. For example, the subheading uses Green/400 per the figma.

Suggested Props

Name	type	comments
heading	string	example: Node.js March 17th Infrastructure Incident Post-mortem per figma, passes through to Preview
subheading	string	example: Vulnerabilities per figma
type	enum announcement | release | vulnerability	default is announcement, passes through to Preview - this enum is already in preview - reuse it
supportingText	string	excerpt of post content, limited to 3 lines via line-clamp. Starting on March 15th and going through to March 17th (with much of the issue being mitigated on the 16th), users were receiving intermittent 404 responses when trying to download Node.js from nodejs.org, or even accessing parts of the website. per figma
avatars	typeof Avatar[]	use the alt value from Avatar as the author's full name, such as Hayden Bleasel per figma
date	Date	formatted as 20 Jan 2024 per figma

Storybook

Add a storybook story file components/Common/Cards/index.stories.tsx which exercises each of the compnent's states.

There are 2 states to capture within styles and stories:

• Light
• Dark

[YashM211]

Can I get this one.

[bmuenzenmeyer]

Thanks for your interest. We don't assign tickets if we can help it. Feel free to submit a pull request if you have time.
Reference 🍪 https://www.redhat.com/en/blog/dont-lick-cookie

[danielmarcano]

Hi, @bmuenzenmeyer! Hope you are doing great. I have just created a PR with the new Common/Card component ✨