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.7)

Note

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

Tiles

Tiles contain a title and a short description. Tiles may also contain a call-to-action button or link. In some of the variants below, the entire tile can be clickable. All tiles have a fluid width and it is recommended to use the Bootstrap grid to control the tile widths.

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.

Title consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code


<!-- To modify the background colours for the tile, the classes
`coc-secondary-9L`, `coc-secondary-8L`, or `coc-secondary` can be used. -->
<div class="cui tile {{ coc-secondary-9L | coc-secondary-8L | coc-secondary }}">
    <div class="tile-body">
        <!-- The card title can be any heading element as long as it has the class `card-title` -->
        <h3 class="tile-title">{{ Tile title }}</h3>
        <p>{{ Tile content }}</p>
    </div>
    <div class="tile-footer">
        <a class="cui btn-md utility-btn" href="{{ URL }}">{{ Link text }}</a>
    </div>
</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.

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.

Code


<!-- Equal height tiles require the Bootstrap flex grid -->
<div class="row row-equal-height-tiles">
    <!-- Customize the column classes for your scenario -->
    <div class="col-sm-6 col-lg-4">
        <div class="cui tile coc-secondary-9L">
            <div class="tile-body">
                <!-- The card title can be any heading element as long as it has the class `card-title` -->
                <h3 class="tile-title">{{ Tile title }}</h3>
                <p>{{ Tile content }}</p>
            </div>
            <div class="tile-footer">
                <a class="cui btn-md utility-btn" href="{{ URL }}">{{ Link text }}</a>
            </div>
        </div>
    </div>

    <!-- Repeat as necessary -->
    <div class="col-sm-6 col-lg-4">
        <div class="cui tile coc-secondary-9L">
            ...
        </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.

Code


<!-- Add the class `light` to give the tile a white background. -->
<a href="{{ URL }}" class="cui tile with-icon {{ light }}">
    <div class="tile-media">
        <span class="tile-icon {{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
    </div>
    <div class="tile-body">
        <!-- The card title can be any heading element as long as it has the class `card-title` -->
        <h3 class="tile-title">{{ Tile title }}</h3>
        <p>{{ Tile content }}</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.

Code


<!-- Add the class `light` to give the tile a white background. -->
<a href="{{ URL }}" class="cui tile-button with-large-icon {{ light }}">
    <div class="tile-detail">
        <!-- Add the image as a background-image -->
        <span class="background-image" aria-hidden="true" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></span>
        <!-- OR add the SVG illustration image using an <img> tag -->
        <img class="cimg top" src="{{ SVG image file path (e.g. bus-o.svg) }}" alt="">

        <h3 class="tile-title">{{ Tile title }}</h3>
        <p class="tile-descript">{{ Tile content }}</p>
    </div>
</a>

Data tiles

Use data tiles to showcase a data metric.

Element Details
Title / name The name or title of the metric.
Icon (Optional) A decorative City of Calgary icon to visually supplement the name.
Value The metric to be highlighted. Should be short and take up only one line. If the value starts wrapping onto multiple lines, the value should be shortened or the width of the tile should be increased.
Description Details of the metric. Composed of <p> tags. Multiple <p> tags may be used.

The tile widths are set with Bootstrap grid column classes. Refer to the Equal height tiles section above to give tiles the same height.

Two variants are available: static and interactive.

Static

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

Example name or title 79%

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example name or title 82%

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.

Example name or title 122K

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

Code


<!-- Static -->
<div class="row row-equal-height-tiles">
    <!-- Update the bootstrap column classes to suit your needs -->
    <div class="{{ Bootstrap column classes (e.g. col-12 col-sm-6 col-md-4) }}">
        <div class="cui tile-data">
            <span class="name">
                <!-- The icon is optional -->
                <span class="cicon-lg {{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
                {{ Name }}
            </span>
            <span class="value">{{ Value }}</span>
            <p>{{ Title content }}</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 border and value metric are coloured red to indicate that it is an interactive element. Styles for the hover, focus, and active states are built in.

Code


<!-- Interactive -->
<div class="row row-equal-height-tiles">
    <!-- Update the bootstrap column classes to suit your needs -->
    <div class="{{ Bootstrap column classes (e.g. col-12 col-sm-6 col-md-4) }}">
        <a class="cui tile-data" href="page.html">
            <span class="name">
                <!-- The icon is optional -->
                <span class="cicon-lg {{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
                {{ Name }}
            </span>
            <span class="value">{{ Value }}</span>
            <p>{{ Title content }}</p>
        </a>
    </div>

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