Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Tiles

Global files
  1. coc-basic-style.css
  2. cicon-package.zip
  3. bootstrap-grid.css (4.4.1)
Pattern files
  1. coc-tile.css

Tile

Title goes here

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Title goes here

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Title goes here

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Code 


<div class="row">
    <div class="col-md-4">
        <div class="cui tile coc-secondary-9L">
            <h3>Title goes here</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <button class="cui btn-md secondary-ghost">Call to action</button>
        </div>
    </div>
        <div class="col-md-4">
        <div class="cui tile coc-secondary-8L">
            <h3>Title goes here</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <button class="cui btn-md secondary-ghost">Call to action</button>
        </div>
    </div>
    <div class="col-md-4">
        <div class="cui tile coc-secondary">
            <h3>Title goes here</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <button class="cui btn-md secondary-ghost">Call to action</button>
        </div>
    </div>
</div>

Usage

Different background colours may be used for the tiles. Refer to the Colour palette page for your reference.

Tile button

The tile button is wrapped in an <a> tag so the entire tile can be clicked or tapped to take the user to the desired page.

Two background colour options are available for tile buttons:

The class with-bg-color will give a default white background colour. On hover, the background colour will change to light grey.

The class with-bg-color-grey will give a default light grey background colour. On hover, the background colour will change to a lighter grey.

Environment

Landfills, Water services, Sewage treatment, Urban forestry, Stormwater and river management

Neque porro quisquam est qui dolorem ipsum

There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.

Code 


<a href="#" class="cui tile-button with-bg-color">
    <div class="tile-detail">
        <span class="cui cicon-responsive program-service-environment-icon" aria-hidden="true"></span>
        <h2 class="tile-title h3">Environment</h2>
        <p class="tile-descript">Landfills, Water services, Sewage treatment, Urban forestry, Stormwater and river management</p>
    </div>
</a>

<a href="#" class="cui tile-button with-bg-color-grey">
    <div class="tile-detail">
        <span class="cicon-home cicon-responsive cui" aria-hidden="true"></span>
        <h2 class="tile-title h3">Neque porro quisquam est qui dolorem ipsum</h2>
        <p class="tile-descript">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.</p>
    </div>
</a>

Tile button - with thumbnail or large icon

The tile button is wrapped in an <a> tag so the entire tile can be clicked or tapped to take the user to the desired page.

There are two ways the the thumbnail or icon can be set up.

1. The background image thumbnail can be set using inline CSS styles:

Neque porro quisquam est qui dolorem ipsum

There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.

Neque porro quisquam est qui dolorem ipsum

There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.


2. The icon can be set using the icon font class names:

Neque porro quisquam est qui dolorem ipsum

There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.

Neque porro quisquam est qui dolorem ipsum

There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.

Code 


<!--
Choose the different border style for the tile-buttons
- add the class 'thin-outline' - the tile button has the thin border (1px)
- add the class 'thick-outline' - the tile button has the thick border (6px)

Choose the different text aligning
- add the class 'text-left' to the tile-detail div - the text will be aligned to the left
- add the class 'text-center' to the tile-detail div - the text will be aligned to the center

Choose the background color for the tile-buttons
- add the class 'with-bg-color' to the tile-button - the default background color is light gray. When using mouse hover, the background will be changed to white
-->
<a href="#" class="cui tile-button with-large-icon thin-outline with-bg-color">
    <div class="tile-detail text-left">
        <span class="icon-placeholder" aria-hidden="true" style="background-image: url( 'image.jpg' );"></span>
        <h2 class="tile-title h3">Neque porro quisquam est qui dolorem ipsum </h2>
        <p class="tile-descript">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.</p>
    </div>
</a>
<a href="#" class="cui tile-button  with-large-icon thick-outline with-bg-color">
    <div class="tile-detail text-left">
        <span class="icon-placeholder" aria-hidden="true" style="background-image: url( 'image.jpg' );"></span>
        <h2 class="tile-title h3">Neque porro quisquam est qui dolorem ipsum </h2>
        <p class="tile-descript">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.</p>
    </div>
</a>
<a href="#" class="cui tile-button  with-large-icon thin-outline with-bg-color">
    <div class="tile-detail text-left">
        <span class="cicon-parks-recreation cicon-responsive cui" aria-hidden="true"></span>
        <h2 class="tile-title h3">Neque porro quisquam est qui dolorem ipsum </h2>
        <p class="tile-descript">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.</p>
    </div>
</a>
<a href="#" class="cui tile-button  with-large-icon thick-outline with-bg-color">
    <div class="tile-detail text-left">
        <span class="cicon-parks-recreation cicon-responsive cui" aria-hidden="true"></span>
        <h2 class="tile-title h3">Neque porro quisquam est qui dolorem ipsum </h2>
        <p class="tile-descript">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain.</p>
    </div>
</a>

Equal height tiles

Tiles can have equal heights by utilizing the CSS flexbox feature. All tiles in a row will be set to equal heights, based on the height of the tallest tile in the row.

Note: Equal height tiles require the Bootstrap flex grid. Use a row as the main wrapper element and col-* classes to wrap around individual tiles. Apply the class row-equal-height-tiles to the row, as seen in the code block below.

In the examples below, the call to action button is aligned to the bottom in each of the tiles. This is done by placing the button inside a div with the class tile-footer.

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna nisl, finibus eget vulputate eu, mattis in eros. Nullam rhoncus pulvinar lectus, sed faucibus nisl lobortis eget.

Title goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title goes here

Pellentesque at dui ullamcorper, viverra ligula nec, fermentum nisi. In eu tincidunt dolor, a vulputate metus.

Code 


<!-- Equal height tiles require the Bootstrap flex grid -->
<div class="row row-equal-height-tiles">
    <div class="col-sm-6 col-lg-4">
        <div class="cui tile coc-secondary-9L">
            <h3>Title goes here</h3>
            <p>Content goes here</p>
            <div class="tile-footer">
                <button class="cui btn-md secondary-ghost">Call to action</button>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-4">
        <div class="cui tile coc-secondary-8L">
            <h3>Title goes here</h3>
            <p>Content goes here</p>
            <div class="tile-footer">
                <button class="cui btn-md secondary-ghost">Call to action</button>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-4">
        <div class="cui tile coc-secondary">
            <h3>Title goes here</h3>
            <p>Content goes here</p>
            <div class="tile-footer">
                <button class="cui btn-md secondary-ghost">Call to action</button>
            </div>
        </div>
    </div>
</div>