@ithaka/bonsai/documentation/pages/components/media-object.md

ITHAKA core styling

---
title: Media Object
description: Media objects are used to display items alongside textual or otherwise descriptive content. Typically this means a fixed-width element next to text (e.g., checkbox and metadata).
sass: ./scss/_mediaobject.scss
foundation: http://foundation.zurb.com/sites/docs/media-object.html
---

## How to Use

The `.media-object` is a container for `.media-object-section` to have items placed next to each other
where a flexible grid doesn't make sense. Add `.main-section` to the main content area for correct alignment.

```html_example
<div class="media-object">
    <div class="media-object-section">
        <img src="http://via.placeholder.com/150x200" alt="Object image" />
    </div>
    <div class="media-object-section main-section">
        <h1 class="medium-heading">
            Placeholder image
        </h1>
        <div class="author">
            Jim Rogers
        </div>
        <div class="maker">
            <cite>Placeholder Inc</cite>
        </div>
        <div class="created-date">
            September 1, 2017
        </div>
    </div>
</div>
```