14 #Tiles Tiles

tile, tile-content, tile-category, tile-title

Tiles should contain a tile-content, which in turn may optionally contain a tile-title.

If the tile class is applied to an <a> tag, the entire tile acts as a link and will highlight on mouse over.

Examples

Default styling

Category

Tile title

Tile content here.

tile-bordered

add a thin border

Category

Tile title

Tile content here.

tile-inverse

dark tile with light text

Category

Tile title

Tile content here.

tile-highlight

brightly-colored tile

Category

Tile title

Tile content here.

<div class="tile [modifier class]">
  <div class="tile-content">
    <div class="tile-category">Category</div>
    <h4 class="tile-title">Tile title</h4>
    Tile content here.
  </div>
</div>

Example

Tile title

Tile content here.

Show Markup

<a href="#" class="tile">
  <div class="tile-content">
    <div class="tile-category">Category</div>
    <h4 class="tile-title">Tile title</h4>
    Tile content here.
  </div>
</a>

14.1 #Tiles.Media Tile with Media

tile-media

Tiles may optionally contain a tile-media element to enclose an image. This should be immediately before or immediately after the tile-content.

Example

Tile title

Tile content here.

<a href="#" class="tile">
  <div class="tile-content">
    <h4 class="tile-title">Tile title</h4>
    Tile content here.
  </div>
  <div class="tile-media">
    <img src="//placehold.it/400x300"/>
  </div>
</a>

14.2 #Tiles.Bordered Bordered Tiles

Examples

Default styling

Category

Tile title

Tile content here.

tile-bordered-primary

dark blue highlight

Category

Tile title

Tile content here.

tile-bordered-info

light blue highlight

Category

Tile title

Tile content here.

<div class="tile tile-bordered [modifier class]">
  <div class="tile-content">
    <div class="tile-category">Category</div>
    <h4 class="tile-title">Tile title</h4>
    Tile content here.
  </div>
  <div class="tile-footer">
    <div class="standalone-link">Learn more</div>
  </div>
</div>

14.3 #Tiles.CTA-Block CTA Block extended

cta-block, cta-block-header, cta-block-body, cta-block-footer

Examples

Default styling

Contact us to learn what MiFID II means for your organization, and how to stay compliant.

cta-block-inverse

gray block with white text

Contact us to learn what MiFID II means for your organization, and how to stay compliant.

cta-block-info

blue block with white text

Contact us to learn what MiFID II means for your organization, and how to stay compliant.

cta-block-image

white text (expects a background image; see 2nd example below)

Contact us to learn what MiFID II means for your organization, and how to stay compliant.

<div class="cta-block [modifier class]">
  <span class="cta-block-header">
    Contact us to learn
  </span>
  <span class="cta-block-body">
    what MiFID II means for your organization, and how to
    stay compliant.
  </span>
  <div class="cta-block-footer">
    <a href="http://example.com" class="btn btn-secondary btn-more">
      Learn more
    </a>
  </div>
</div>

Example

Contact us to learn what MiFID II means for your organization, and how to stay compliant.

Show Markup

<div style="max-width: 300px">
<div class="cta-block cta-block-image"
  style="background-image: url(http://placekitten.com/300/250)"
>
  <span class="cta-block-header">
    Contact us to learn
  </span>
  <span class="cta-block-body">
    what MiFID II means for your organization, and how to
    stay compliant.
  </span>
  <div class="cta-block-footer">
    <a href="http://example.com" class="btn btn-secondary btn-more">
      Learn more
    </a>
  </div>
</div>
</div>

14.4 #Tiles.Icon-Grid Icon Grid

icon-grid, icon-link

A grid of icons for app launchers.

Example

<div class="icon-grid">
  <button type="button" class="icon-link">
    <img src="https://placehold.it/50x50" width="50" height="50" alt="App icon">
    <div class="icon-link-label">Customer Desk Manager</div>
  </button>
  <button type="button" class="icon-link">
    <img src="https://placehold.it/50x50" width="50" height="50" alt="App icon">
    <div class="icon-link-label">Listing Manager</div>
  </button>
  <button type="button" class="icon-link">
    <img src="https://placehold.it/50x50" width="50" height="50" alt="App icon">
    <div class="icon-link-label">NYSE Connect</div>
  </button>
</div>

14.5 #Tiles.Image Image Tile

image-tile, image-tile-overlay

This is a special type of tile, the tile-media will fill the tile. Use a image-tile-overlay to overlay text atop the image.

Examples

Default styling

Mini MSCI Products

inverse

Add this modifier class for darker images

Mini MSCI Products

tile-video

add a video icon

Mini MSCI Products

<a class="tile image-tile [modifier class]">
  <img class="tile-media" src="http://placekitten.com/300/250"/>
  <div class="image-tile-overlay">
    <div class="tile-title">Ice Futures US</div>
    Mini MSCI Products
  </div>
</a>

Example

Show Markup

<button class="tile image-tile">
  <img class="tile-media" src="http://placekitten.com/300/250"/>
  <div class="image-tile-overlay">
    <div class="tile-title">Ice Futures US</div>
    Mini MSCI Products
  </div>
</button>

14.6 #Tiles.Product Product Tile

product-tile, product-tile-featured, product-tile-footer

This is a special type of tile, to highlight a key product or promotion. It adds support for large "featured" text in the middle and a footer along the bottom.

Example

Mini MSCI Products

<a class="tile tile-square tile-inverse product-tile">
  <div class="tile-content">
    <div class="tile-title">Ice Futures US</div>
    Mini MSCI Products
    <div class="product-tile-featured">395,175</div>
    <div class="product-tile-footer">Learn more</div>
  </div>
</a>

14.7 #Tiles.Sizing Sizing Tiles

tile-square, tile-horizontal, tile-vertical

Tiles work within a grid, whether the True Grid or the regular Bootstrap grid. They will fill the width of their container. By default, they grow to the necessary height to contain their contents, but sometimes you will want to lay them out in a grid pattern.

Generally, you should include a tile-media inside of a horizontal or vertial tile. It will automatically be positioned on one half of the tile.

Example

Horizontal tile, with content after tile media.

Square inverse tile

Horizontal tile, with content before tile media.

<div class="row">
  <div class="true-grid-4">
    <a class="tile tile-vertical">
      <div class="tile-content">Vertical Tile</div>
      <div class="tile-media">
        <img src="http://placehold.it/410x400"/>
      </div>
    </a>
  </div>
  <div class="true-grid-8">
    <a class="tile tile-horizontal">
      <div class="tile-media">
        <img src="http://placehold.it/400x410"/>
      </div>
      <div class="tile-content">
        Horizontal tile, with content after tile media.
      </div>
    </a>
    <div class="row">
      <div class="true-grid-4">
        <a class="tile tile-square tile-inverse">
          <div class="tile-content">
            Square inverse tile
          </div>
        </a>
      </div>
      <div class="true-grid-4">
        <a class="tile tile-square">
          <div class="tile-content">
            Square tile
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="true-grid-4">
    <a class="tile tile-square">
      <div class="tile-content">
        Square tile
      </div>
    </a>
  </div>
  <div class="true-grid-8">
    <a class="tile tile-horizontal">
      <div class="tile-content">
        Horizontal tile, with content before tile media.
      </div>
      <div class="tile-media"
        style="background-image: url(http://placehold.it/400x410">
      </div>
    </a>
  </div>
</div>

14.7.1 #Tiles.Sizing.Images Sizing Images

In regular tiles and square tiles, images in tile-media fill the width of the tile and their height is decided naturally by the size of the image. To look correct in a horizontal or vertical tile, special care must be given to the size of the image.

Generally, images should be square. If they are not, images in a tile-vertical should be wider than they are tall, and images in a tile-horizontal should be taller than they are wide. This allows them to fill the narrower dimension of the tile.

Alternatively, you can use an inline style attribute on the tile-media to set a background-image, rather than using an <img> tag inside the element. This method is guaranteed to fill the space, regardless of image size.

14.8 #Tiles.Tile-Grid Tile Grid

tile-grid, tile

Wrap multiple tiles in a tile-grid to control their layout on the page. These tiles will grow naturally to contain their contents. All tiles on each row will have equal height.

Example

Category

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec semper neque. Maecenas eu dapibus massa.

Learn more

Category

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec semper neque. Maecenas eu dapibus massa. Integer sit amet sollicitudin nunc, eu elementum nisi.

Learn more

Category

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec semper neque.

Learn more

<div class="tile-grid">
  <div class="tile tile-bordered">
    <div class="tile-media" style="background-image: url(http://placehold.it/200x100);"></div>
    <div class="tile-content">
      <div class="tile-category">Category</div>
      <h3 class="tile-title">Headline</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec semper neque. Maecenas eu dapibus massa.</p>
      <a href="#" class="standalone-link">Learn more</a>
    </div>
  </div>
  <div class="tile tile-bordered">
    <div class="tile-media" style="background-image: url(http://placehold.it/200x100);"></div>
    <div class="tile-content">
      <div class="tile-category">Category</div>
      <h3 class="tile-title">Headline</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec semper neque. Maecenas eu dapibus massa. Integer sit amet sollicitudin nunc, eu elementum nisi.</p>
      <a href="#" class="standalone-link">Learn more</a>
    </div>
  </div>
  <div class="tile tile-bordered">
    <div class="tile-media" style="background-image: url(http://placehold.it/200x100);"></div>
    <div class="tile-content">
      <div class="tile-category">Category</div>
      <h3 class="tile-title">Headline</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec semper neque.</p>
      <a href="#" class="standalone-link">Learn more</a>
    </div>
  </div>
</div>

14.9 #Tiles.Video Tile Video

TODO