Foundation CSS Card

Foundation CSS offers a versatile card component that allows you to display content in a structured and visually appealing manner. Cards are commonly used to showcase various types of content, such as articles, products, or user profiles, in a consistent layout. Here's how to create a card using Foundation CSS:

1. HTML Structure

Define the HTML structure for the card by enclosing the content within a <div> element with the class card. You can further customize the appearance and layout of the card by adding additional classes, such as section, image, title, description, or button.

<div class="card">
  <div class="card-section">
    <h3>Card Title</h3>
    <p>Card Description</p>
  </div>
  <div class="card-section">
    <a href="#" class="button">Read More</a>
  </div>
</div>

2. Example

Here's an example of a basic card implemented using Foundation CSS:

<div class="card">
  <div class="card-section">
    <h3>Product Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus ut turpis semper fermentum.</p>
  </div>
  <div class="card-section">
    <a href="#" class="button">View Details</a>
  </div>
</div>

Conclusion

Foundation CSS card component offers a flexible and responsive solution for displaying content in a structured format. By leveraging different classes and styling options, you can create visually appealing cards to showcase various types of content on your website.

Archive