Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MaterializeCSS Card Design

I am trying to adapt the Material Design in my personal website using materializecss.com, however the framework only provide options to exclude otherwise images on top of the CARD design.

I want to achieve something as shown below in the link [2nd row, 2nd column/ last image] where the image is sitting at left beside the main content, wondering if anyone could help me on this and I would really appreciate your help on this. thanks!

Card Material Design Example

like image 409
vizFlux Avatar asked Aug 28 '15 03:08

vizFlux


2 Answers

@vizFlux

Here is the code which you want

.card-image {
  float: left;
  width: 40%;
  height: 250px;
}
.card-image img {
  height: 100%;
}
.right-content {
  width: 60%;
  float: left;
}
.card-title {
  padding-left: 20px;
}
<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg" class="hoverZoomLink">
  </div>
  <div class="right-content">
    <span class="card-title">Card Title</span>
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
      </p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
  </div>
</div>

the output should look something like this:

output image

like image 89
Ashish Sherashia Avatar answered Oct 13 '22 02:10

Ashish Sherashia


.card-image {
  float: left;
  width: 40%;
  height: 250px;
}
.card-image img {
  height: 100%;
}
.right-content {
  width: 60%;
  float: left;
}
.card-title {
  padding-left: 20px;
}
<div class="card">
  <div class="card-image">
    <img src="http://www.sauna-nj.co.jp/wp-content/uploads/2017/03/topa-zu.jpg" class="hoverZoomLink">
  </div>
  <div class="right-content">
    <span class="card-title">Card Title</span>
    <div class="card-content">
      <p>岩盤浴で使用されるのは極めて珍しい鉱石です。加熱変色する宝石の代表。またその中でも大変珍しく、加熱や摩擦圧力で帯電し数時間は維持することができます。その後中和状態に戻る際に発する電荷を身体に受けることで肩こりや冷え性の改善、神経性疲労や神経衰弱の回復など様々な症状を改善するといわれています。
      </p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
  </div>
</div>
like image 22
user9191059 Avatar answered Oct 13 '22 02:10

user9191059