Image
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
<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
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
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>
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
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
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
<div class="card">
<div class="card__image">
<img class="image" src=""/>
<div class="overlay">
<p>Photograph</p>
</div>
</div>
</div>
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
<div class="card">
<div class="card__image">
<img class="image" src=""/>
<div class="overlay overlay--bottom">
<p>Photograph</p>
</div>
</div>
</div>
Flat
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
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
![](https://raw.githubusercontent.com/infinitenigma/infinit3/master/docs/assets/images/image.jpg)
<a href="">
<div class="card card--clickable">
<div class="card__image">
<img class="image" src=""/>
</div>
</div>
</a>