IceGroupWeb CSS Guide

15.1 #Media.Attribution Attribution extended

media, media-attribution

Mixin the media-attribution class with the base media class. Unlike other Media types, this does not support a media-right alternative.

Example

Tammy Graves

Content Manager

<div class="media media-attribution">
  <div class="media-left">
    <img class="media-object" src="../images/docs/sample-avatar.png"/>
  </div>
  <div class="media-body">
    <p class="media-heading">Tammy Graves</p>
    <p>Content Manager</p>
  </div>
</div>

15.2 #Media.Landing Landing Page extended

media, media-landing, media-object, media-body, media-link

Designed to go on landing pages, inside of a padded container (such as landing-section). Use a background-image on the media-left or media-right.

The height of this media object is determined purely by the content in the media-body. The image will be cropped to fit if necessary.

TODO: Convert to absolute positioning of <img>, so bg image isn’t necessary when the need is for the content to determine height.

Example

What we do

In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.

<div class="media-landing">
  <div class="media-left" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

Example

What we do

In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.

Show Markup

<div class="media-landing">
  <div class="media-right" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

15.2.1 #Media.Landing.Bleed Media Bleed extended

media, media-bleed, media-left/media-right, media-body, media-heading, media-link

This is designed to go on landing pages, outside of any section containers (such as landing-section). It fills to the edges of the screen. Use a background-image on the media-left or media-right.

Example

What we do

In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.

<div class="media-bleed">
  <div class="media-left" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

Example

What we do

In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.

Show Markup

<div class="media-bleed">
  <div class="media-right" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

15.3 #Media.Promo Media Promo

media-promo

Typically, this would be placed in a narrow container, so the text is not much wider than the image.

Example

<div class="row">
  <div class="true-grid-3">
    <div class="media-promo">
      <img class="media-object" src="../images/docs/promo-cocoa.png"/>
      <p class="media-heading">Headline of text</p>
      <p>Lines of promotional text.  Lines of promotional text.  Lines of promotional text.  Lines of promotional text.</p>
    </div>
  </div>
</div>

15.4 #Media.Callout Media Callout deprecated

media-callout

Deprecated: Media Callout is deprecated as of version 3.0.0 and should no longer be used.

Example

2013 Year in Review

Financial Results and CEO Letter to Shareholders

View our Annual Report

<div class="media media-callout">
  <div class="media-left">
    <img class="media-object" src="http://placehold.it/300x100">
  </div>
  <div class="media-body">
    <h4 class="media-heading">2013 Year in Review</h4>
    <p>Financial Results and CEO Letter to Shareholders</p>
    <a class="standalone-link" href="#">View our Annual Report</a>
  </div>
</div>

IceGroupWeb CSS Guide

Styles

15 #Media Media

2013 Year in Review

2013 Year in Review

15.1 #Media.Attribution Attribution extended

15.2 #Media.Landing Landing Page extended

15.2.1 #Media.Landing.Bleed Media Bleed extended

15.4 #Media.Callout Media Callout deprecated

2013 Year in Review