Need help recreating a Figma card design in HTML/CSS

Other Questions Figma
1

I’m struggling to replicate a card design from Figma using HTML and CSS. My current attempt doesn’t quite capture the original style.

I’m working with a layout that has a total of four cards: two large ones on the left and two smaller ones on the right. Each card shows a name at the top, a prominent number in the middle, and a points value in a footer with a distinct background color.

Here’s an example of my HTML structure:

<div class="card-layout">
  <div class="left-column">
    <div class="big-card">
      <div class="card-content">
        <p class="name">SMITH</p>
        <h2 class="number">2</h2>
      </div>
      <div class="card-footer">
        <p>On 48 Points</p>
      </div>
    </div>
    <!-- Repeat for a second large card -->
  </div>
  <div class="right-column">
    <div class="small-card">
      <!-- Similar structure as above but in a smaller size -->
    </div>
    <!-- Repeat for a second small card -->
  </div>
</div>

I’m having issues with making the CSS responsive while getting the correct sizing and positioning. Any suggestions or improvements on my approach would be greatly appreciated. Thanks!

2

I have worked extensively on converting Figma designs to HTML/CSS and understand the challenges you’re facing. The current structure is a good foundation, but you might benefit from adjusting your approach. Instead of relying solely on traditional layout techniques, consider using CSS Grid for arranging the overall layout because it makes the responsiveness much easier to manage. Additionally, CSS custom properties can streamline color, size, and spacing management. For aligning the content within the cards, using flexbox helps maintain vertical alignment and convenient spacing. Also, employing relative units like em or rem instead of fixed units can improve the overall responsiveness. If the design calls for a special effect around the prominent number, using a pseudo-element for a background circle might be effective. Integrating these methods should bring your HTML/CSS much closer to the precise look you see in Figma.

3

Hey there! I’ve been in your shoes before, and I totally get the frustration. One thing that really helped me was using CSS Grid for the overall layout. It’s a game-changer for responsive designs like yours.

For the cards themselves, I’d suggest flexbox. It’s great for aligning content vertically and horizontally. Something like:

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

This way, your name stays at the top, the number in the middle, and the footer at the bottom.

Also, don’t forget about CSS variables for colors and sizes. They make it so much easier to maintain consistency across your design. And for that prominent number, you could try using a pseudo-element to create a background circle or shape.

Lastly, media queries are your best friend for adjusting sizes on different screens. Start with a mobile-first approach and scale up. It’ll save you a ton of headaches in the long run. Good luck with your project!

4

I’ve encountered similar challenges when translating Figma designs to code. One approach that’s worked well for me is utilizing CSS Grid for the overall layout and Flexbox for individual card content alignment. This combination provides excellent control over both the macro and micro aspects of your design.

For responsiveness, consider using relative units like ‘rem’ for font sizes and padding. Media queries are crucial for adjusting card sizes and layout at different breakpoints. To achieve that polished look, don’t overlook subtle details like box-shadows, border-radius, and potentially a subtle background gradient for depth.

Regarding the prominent number, you might want to explore using pseudo-elements to create a background shape or circle. This can add visual interest without complicating your HTML structure. Lastly, ensure your CSS is well-organized, perhaps using a methodology like BEM for clarity and maintainability.

5

hey man, have u tried using flexbox for the card layout? it’s pretty sweet for responsive stuff. also, maybe use rem units for font sizes and padding to keep things scalable. don’t forget to add some box-shadow for depth. and yeah, media queries are ur friend for adjusting sizes on different screens. good luck!