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.

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

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

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

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.

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

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.

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

<!-- 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>