Tiles

Basic tile

The basic tile contains a title, description, and a call to action button.

Different background colours may be used for the tiles. Apply the classes coc-secondary-9L, coc-secondary-8L, or coc-secondary to the tile element.

<div class="cui tile coc-secondary-9L">
    <h3>Tile title</h3>
    <p>Tile description</p>
    <button class="cui btn-md utility-btn">Call to action</button>
</div>

<div class="cui tile coc-secondary-8L">
    <h3>Tile title</h3>
    <p>Tile description</p>
    <button class="cui btn-md utility-btn">Call to action</button>
</div>

<div class="cui tile coc-secondary">
    <h3>Tile title</h3>
    <p>Tile description</p>
    <button class="cui btn-md utility-btn">Call to action</button>
</div>

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.

Equal height basic tiles

To align the call-to-action button to the bottom of each tile, place the button inside a div with the class tile-footer.

<!-- 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 utility-btn">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 utility-btn">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 utility-btn">Call to action</button>
            </div>
        </div>
    </div>
</div>

Tile button

Tile buttons are links and wrapped in <a> tags allowing for the entire tile to be clickable. Tile buttons contain either an icon or an image.

By default, the background colour is a light grey and on hover, the background changes to white. Use the light class to change the background colour to white.

The widths are set with Bootstrap grid column classes. Add the class row-equal-height-tiles to the row element to give the tiles equal heights.

With icon

The tile button with icon variant contains a responsive decorative icon. View the full list of City of Calgary icons available.

<!--
The following modifier classes may be applied to the `tile-button` element.

Theme:
- Use the class `light` for a white background
-->

<a href="#" class="cui tile-button">
    <div class="tile-detail">
        <span class="cui cicon-responsive cicon-home" aria-hidden="true"></span>
        <h3 class="tile-title">Tile title</h3>
        <p class="tile-descript">Tile description</p>
    </div>
</a>

With image

There are two ways the tile image can be set up.

1. The image can be set on the .background-image element:

2. The SVG illustration image can be set using an <img> tag. See the full list of SVG images.

Title consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title in eu tincidunt dolor a vulputate

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 aenean magna nisl

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

<!--
The following modifier classes may be applied to the `tile-button with-large-icon` element.

Theme:
- Use the class `light` for a white background
-->

<a href="#" class="cui tile-button with-large-icon">
    <div class="tile-detail">
        <!-- Add the image as a background-image -->
        <span class="background-image" aria-hidden="true" style="background-image: url( 'image.jpg' );"></span>
        <!-- OR add the SVG illustration image using an <img> tag -->
        <img class="cimg top" src="bus-o.svg" alt="">

        <h3 class="tile-title">Tile title</h3>
        <p class="tile-descript">Tile description</p>
    </div>
</a>

Data tiles

Use data tiles to showcase a data metric consisting of 3 components: the name, the value, and a short description.

The widths are set with the Bootstrap grid column classes. Add the class row-equal-height-tiles to the row element to give the tiles equal heights.

Two variants are available: static and interactive.

Static

The following data tiles contain no interactivity. Their purpose is to simply display the information.

<!-- Static -->
<div class="row row-equal-height-tiles">
    <!-- Update the bootstrap column classes to suit your needs -->
    <div class="col-12 col-sm-6 col-md-4">
        <div class="tile-data">
            <span class="name">Name</span>
            <span class="value">Value</span>
            <p>Example description. Lorem ipsum dolor vestibulum congue dolor eget nisl maximus tincidunt.</p>
        </div>
    </div>

    <!-- Add additional tiles as necessary -->
    ...
</div>

Interactive

The following data tiles have been converted to interactive links using the <a> tag. The value metric is coloured red to indicate that it is an interactive element. Styles for the hover, focus, and active states have been added.

<!-- Interactive -->
<div class="row row-equal-height-tiles">
    <!-- Update the bootstrap column classes to suit your needs -->
    <div class="col-12 col-sm-6 col-md-4">
        <a class="tile-data" href="page.html">
            <span class="name">Name</span>
            <span class="value">Value</span>
            <p>Example description. Lorem ipsum dolor vestibulum congue dolor eget nisl maximus tincidunt.</p>
        </a>
    </div>

    <!-- Add additional tiles as necessary -->
    ...
</div>