Widgets

Code

<!-- Basic Version -->
<div class="info-widget-CTA coc-secondary-8L cui">
    <div class="left-col">
        <p id="cityTalk" class="details">Your official source for the latest<br> City of Calgary news and information</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md primary" aria-describedby="cityTalk">View CityTalk&nbsp;<span class="cicon-external-link"></span></a>
    </div>
</div>

<!-- Large Decorative Icon Version -->
<div class="info-widget-CTA with-large-icon coc-secondary-8L cui">
    <div class="left-col">
        <span class="cicon-comments-o" aria-hidden="true"></span>
        <p id="cityTalk" class="details">Your official source for the<br> latest City of Calgary news and information</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md primary" aria-describedby="cityTalk">View CityTalk&nbsp;<span class="cicon-external-link"></span></a>
    </div>
</div>

<!-- Compacted Version -->
<div class="info-widget-CTA coc-secondary-8L cui info-widget-CTA-compact">
    <div class="left-col">
        <p id="cityTalk" class="details">Your official source for the latest <br>City of Calgary news and information</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md primary" aria-describedby="cityTalk">View CityTalk&nbsp;<span class="cicon-external-link"></span></a>
    </div>
</div>

<!-- Compacted Version with 2 CTA buttons -->
<div class="info-widget-CTA coc-secondary-8L cui info-widget-CTA-compact">
    <div class="left-col">
        <p id="cityTalk" class="details">Looking for more business information on<br> helping customers get around 17th Ave?</p>
    </div>
    <div class="right-col">
        <a class="cui btn-md utility-btn" aria-describedby="cityTalk">View business FAQs</a>
        <a class="cui btn-md utility-btn" aria-describedby="cityTalk">Send me updates</a>
    </div>
</div>

Usage

Display information and invite the user to take the action.

Accessibility

Use the aria-describedby attribute to indicate the id of the element that describes the CTA button(s).

Code

<!-- Using aria-label
The aria-label attribute provides a description of the section to users that use landmarks to navigate the page.
This approach makes it possible to use headings only in the main content of the page. The label of the menu is
announced when entering the menu as well as when navigating to it. -->

<h2>List widget - regular font-weights for all the list items</h2>
<nav aria-label="Main Menu">
    <ul class="list-widget cui">
        <li><a href="#"><span>Example link name</span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
    </ul>
</nav>

<nav aria-label="Main Menu">
    <ol class="list-widget cui">
        <li><a href="#"><span>Example link name</span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
    </ol>
</nav>

<h2>List widget - bold font for only the first list item</h2>
<nav aria-label="Main Menu">
    <ul class="list-widget cui">
        <li><a href="#"><span><strong>Example link name</strong></span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
    </ul>
</nav>

<nav aria-label="Main Menu">
    <ol class="list-widget cui">
        <li><a href="#"><span><strong>Example link name</strong></span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
        <li><a href="#"><span>Example link name</span></a></li>
    </ol>
</nav>

<nav aria-label="Ralated links">
    <h3 class="regular-link-title">Related links</h3>
    <ul class="list-widget cui regular-link">
        <li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
        <li><a href="#">Aliquam tincidunt</a></li>
        <li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
        <li><a href="#">Aliquam tincidunt</a></li>
        <li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
        <li><a href="#">Aliquam tincidunt</a></li>
        <li><a href="#">Neque porro quisquam est qui dolorem ipsum</a></li>
        <li><a href="#">Aliquam tincidunt</a></li>
    </ul>
</nav>

Usage

• The first item on the list widget should be the most important item in the list.

Code

<!-- Button label -->
<div class="cui label-widget">
    <button aria-label="Text to describe the purpose of the button or link" class="cui icon-label-btn icon-label-btn-info">
        Label text <span class="cicon-info-circle" aria-hidden="true"></span>
    </button>
    <p>Additional text to provide more details for the label widget.</p>
</div>

<!-- Text label -->
<div class="cui label-widget">
    <span class="cui label-text coc-secondary-blue-access">
        Label text <span class="cicon-info-circle" aria-hidden="true"></span>
    </span>
    <p>Additional text to provide more details for the label widget.</p>
</div>

Usage

The styling can be used to call out either a call-to-action button, link, or text.

Example usage: use as a 'Beta' button, link or text label to point to a new feature of your site.