Miss any of our Open RFC calls?Watch the recordings here! »

basscss-media-object

1.1.0 • Public • Published

Basscss Media

Flexbox media object module for Basscss - http://basscss.com

Basic Usage

<div class="media">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Centered

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Bottom Aligned

<div class="media media-bottom">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Source Order

<div class="media">
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>

Double-Sided

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>

Multiple Images

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Responsive Media Objects

<div class="sm-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
<div class="md-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
<div class="lg-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Install

npm i basscss-media-object

DownloadsWeekly Downloads

16

Version

1.1.0

License

MIT

Last publish

Collaborators

  • avatar