At the moment, I have a container that acts as a boundary for a group of cards:
.cards-container {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
border: 5px solid violet;
}
.card {
margin: 10px;
transition: all 0.4s;
width: 25em;
/* height: 25em; */
border: 5px solid black;
}
In my React code, I render them on the page like this:
<div className={classes['cards-container']}>
{
articlesData.length > 0 ?
articlesData.map( (article) =>
<div key={article.id} className={classes.card}>
<Card
itle={article.title}
body={article.abstract}
/>
</div>
) :
null
}
</div>
The Card component has the following CSS styles:
.mycard {
background-color: white;
display: block;
padding: 1rem;
border-radius: .25rem;
/* box-shadow: 0 2px 8px 0 rgba(0,0,0,0.9); */
border: 5px solid red;
}
.mycard-body {
font-size: 0.7rem;
}
.mycard-header {
/* font-size: 1.5rem; */
font-size: 1rem;
margin-bottom: .5rem;
}
.mycard-footer {
margin-top: 1rem;
}
Lastly, here's how the card component is defined:
const Card = (props) => {
const mainText = props.body.slice(0,300);
const [textBody, setTextBody] = useState(mainText + '...');
const onSeeMore = () => {
setTextBody(props.body);
}
return <>
<div className={classes.mycard}>
<div className={classes['mycard-header']}>
{props.title}
</div>
<div className={classes['mycard-body']}>
{textBody}
</div>
<div className={classes['mycard-footer']}>
<button type='button' onClick={onSeeMore}>See More.</button>
</div>
</div>
</>
};
The text within these cards can vary, causing some to not fill the entire box assigned to a card, resulting in irregular sizes like shown in the image below: https://i.stack.imgur.com/UOsGz.png
I require the uniform bounding box for consistency in transitions and effects when hovering over a card. How can I ensure that the cards maintain the same size but accommodate varying content lengths?
Thank you for any assistance provided.