Media Object

The media object is a common UI pattern which is often used in a lot of situations where you have a figure and some written content.

The figure usually appears to the left or the right of the written content and sometimes can appear with some sort of action a user should take.

To help speed up development, when you are presented with a new media object like component, you can use the media mixin to quickly scaffold the main structural components. Below are illustrative examples of the two types of media object layouts you can achieve. The media mixin doesn't provide any kind of UI skin, only structure.

The media mixin takes the components CSS class name, and appends pre-defined names to generate the CSS for a given media object type, and it's associated HTML mark-up needed to achieve that layout.

Media Object default

By including the media mixin into your CSS component, it will generate some pre-defined mark-up structures detailed below.

The default media object uses floats for layout.

Media Object Body

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ipsum, atque praesentium ad ut perspiciatis aliquid recusandae quasi eum laudantium culpa, odio maxime, eveniet nam architecto. Aliquam illum nemo repudiandae.

To attain the above layout, follow the simple HTML structure that is described by the Sass mixin. A media object comes with componentName-figure and componentName-body.

Media Object Body

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque minus, sint similique assumenda inventore, fugit, eos, dolore maxime natus vel magnam autem placeat numquam facere? Ab suscipit corporis, facere aut.

To position the figure to the right of the text, use the componentName-figure--opposite modifier whilst keeping the mark-up structure the same.

Media object table

As an alternative, the table layout version may also be used. This gives better middle, vertical alignment to the content in the media object, and comes with an additional actions section.

The name table comes from using display: table to achieve the vertical alignment, and as such each section is contained in a componentName-column which acts as a table cell

Pass in the string of table to the media mixin to change the pre-defined HTML structure outputted in the components CSS.

Media Object Table Body


Label each section of the media object as a -column. You then have the choice of a -figure, -body or -actions CSS class for the desired layout.

Media Object Table Body


Unlike the default media object, to achieve the figure being positioned to the right of the text content, no modifier class is required but the mark-up structure does need to be re-ordered.