materializecss Basic Card


<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">

        <div class="card-image"> <!-- Card Image -->
          <img src="image.png" alt="Image">

        <div class="card-content"> <!-- Card Content -->
          <h3>This is a card</h3>
          <p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>

        <div class="card-action"> <!-- Card Action -->
          <a href="#" class="btn orange">Read More</a>



  • Use .card as the main surrounding element.
  • Surround images with .card-image
  • Surround content with .card-content
  • Surround action buttons with .card-action

Here's what it looks like: Card