I'm currently developing a project using react typescript, and I need to showcase various projects in the form of cards. However, I would like these cards to be displayed in a stacked layout like this
Here is the component for displaying the projects:
export function Project({ project }: { project: IProject }) {
return (
<Card title={project.title} bordered={true} className="Card-Project">
<p>Description:{project.description}</p>
<ul>
Skills Required:
{project.skillsRequired.map((skill, index) => (
<li key={index}>{skill}</li>
))}
</ul>
<p> budget :{project.budget} CA$</p>
<p>Experience Level: {project.experienceLevel}</p>
<p>Category:{project.category}</p>
</Card>
)
}
Below is the CSS file for styling the card project :
.Card-Project {
width: 180%;
margin: 0 auto;
padding: 24px;
margin-top: 20px;
margin-left: 250px;
margin-bottom: 20px;
background-color: hwb(0 97% 0%);
}
I have attempted to arrange them in a vertical order.