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
Description
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
Description
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.