Media Info

by

The concept behind mediainfo is the use of any media (image, icon or video) on one side along with info on another side. Info and media could be reversed and we have the option to present vertical or horizontal options.

MEDIAINFO – VERTICAL

Feature Smallset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Largeset

The size of the title above and this summary is applied by css selector on the parent container.

MEDIAINFO – HORIZONTAL

Feature Smallset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

INFOMEDIA – VERTICAL

Feature Smallset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Largeset

The size of the title above and this summary is applied by css selector on the parent container.

INFOMEDIA – HORIZONTAL
Use the CSS selector “infomedia” instead of “mediainfo” to reverse the layout

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

INFOMEDIA – VERTICAL
It’s easier to maintain consistency if the media is before the info due to the unpredictable nature of how long some text might be (see below).

Feature Smallset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

Feature Largeset

The size of the title above and this summary is applied by css selector on the parent container.

MEDIAINFO.SPREAD
This version shows an option to extend the image halfway throughout the width of the page while content occupies the other side.
▾

Feature Mediumset

The size of the title above and this summary is applied by css selector on the parent container.

MEDIAINFO.SPREAD
Same example as previous except this version demonstrates a grid of features on the info area. This one is a little bit wonky at the moment but when needed, I’ll work out the bugs. Just a simple example to show what we’re capable of.
▾

Multiple Features

A feature inside of another larger feature that is a bit outside of the typical layout. Try resizing the screen and guess how these layouts would autocorrect themselves.

Don’t get limited in your capacity to show stuff.

Pretty cool huh?