materializecss Horizontal Card


Example

<div class="container">
  <div class="row">
    <div class="col s12">
      <div class="card horizontal">
        <div class="card-image"><img src="image.png"></div>
        <div class="card-stacked">
          <div class="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>
          <div class="card-action"><a href="#" class="btn orange">Read More</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Important:

  • Add .horizontal to the card element
  • Surround .card-content and .card-action with a div with .card-stacked

Here's what it looks like: Horizontal Card