Coders Resources

Card

 

Image

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
</div>

Content

Photograph

A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.

<div class="card">
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>...</p>
  </div>
</div>

Image and Content

Photograph

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

Photograph

A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip. 

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
    <p>...</p>
  </div>
</div>

Image Overlay

Photograph

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
    <div class="overlay">
      <p>Photograph</p>
    </div>
  </div>
</div>

Photograph

<div class="card">
  <div class="card__image">
    <img class="image" src=""/>
    <div class="overlay overlay--bottom">
      <p>Photograph</p>
    </div>
  </div>
</div>

Flat

Photograph

<div class="card card--flat">
  <div class="card__image">
    <img class="image" src=""/>
  </div>
  <div class="card__content">
    <div class="card__header">
      <h4>Photograph</h4>
    </div>
  </div>
</div>

Clickable

<a href="">
  <div class="card card--clickable">
    <div class="card__image">
      <img class="image" src=""/>
    </div>
  </div>
</a>
Search