Next.js Discord

Discord Forum

Cards items location

Unanswered
Basenji posted this in #help-forum
Open in Discord
BasenjiOP
Hey everyone, im trying to work on multiple pages but im having trouble with the following:
right now i have 2 pages. and they both have cards as components. the issue i have is that i have both pages that have those cards in the center, but i want the second page to have the cards on the middle left. I've got only 1 file called card-module.css as the 'default' css for the card. but how do i manage to do multiple for each page?

6 Replies

BasenjiOP
.card {
  display: flex;
  align-items: center;
  background-color: #f0f4f8;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 10px 0;
  justify-content: center;
}

.cardImage {
  width: 150px;
  height: 80px;
  object-fit: cover;
}
  
  .cardContent {
    padding: 20px;
    flex: 1;
  }
  
  .cardTitle {
    margin: 0 0 10px 0;
    color: #21CEA1;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .cardText {
    margin: 5px 0;
    color: #21CEA1;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .cardButton {
    background-color: #21CEA1;
    color: white;
    border: none;
    padding: 10px 200px;
    border-radius: 20px;
    margin-top: 10px;
    cursor: pointer;
    outline: none;
  }

  .cardSubtitle {
    font-weight: bold;
    margin-top: 10px;
  }
  
  .cardContent.expanded {
    max-height: none; 
  }

if i change the justify content from center to flex-end it gives me an error?
sorry im really slow at this ive been figuring this out for hours so bare with me
Ray
or create a props for the card and use different class
.cardPositionCenter {
   justify-content: center;
}
.cardPositionEnd {
   justify-content: end;
}
  export default function CardComponent({ center }) {
     return (
        <div className={center ? styles.cardPositionCenter : styles.cardPositionEnd}>
          ....
        </div>
     )
}