Widgets

Information widget

With call-to-action

Code


<div class="cui info-widget-CTA bg-medium border-medium">
    <div class="left-col">
        <p class="details">{{ Content }}</p>
    </div>
    <div class="right-col">
        <a href="{{ URL }}" class="cui btn-md primary">{{ Button text }}</a>
    </div>
</div>

With call-to-action and decorative icon

Code


<div class="cui info-widget-CTA with-large-icon bg-medium border-medium">
    <div class="left-col">
        <span class="{{ Icon class (e.g. cicon-home) }}" aria-hidden="true"></span>
        <p class="details">{{ Content }}</p>
    </div>
    <div class="right-col">
        <a href="{{ URL }}" class="cui btn-md primary">{{ Button text }}</a>
    </div>
</div>

Compact, with call-to-action

Code


<div class="cui info-widget-CTA bg-medium border-medium compact">
    <div class="left-col">
        <p class="details">{{ Content }}</p>
    </div>
    <div class="right-col">
        <a href="{{ URL }}" class="cui btn-md primary">{{ Button text }}</a>
    </div>
</div>

Compact with two call-to-actions

Code


<div class="cui info-widget-CTA bg-medium border-medium compact">
    <div class="left-col">
        <p class="details">{{ Content }}</p>
    </div>
    <div class="right-col">
        <a href="{{ URL }}" class="cui btn-md utility-btn">{{ Button text }}</a>
        <a href="{{ URL }}" class="cui btn-md utility-btn">{{ Button text }}</a>
    </div>
</div>

With title and content

Code


<div class="cui info-widget-title coc-secondary-8L">
    <div class="left-col">
        <h3>{{ Title }}</h3>
    </div>
    <div class="right-col">
        <p>{{ Content }}</p>
    </div>
</div>

Information This site is moving

Note

Widgets

Information widget

With call-to-action

Code

With call-to-action and decorative icon

Code

Compact, with call-to-action

Code

Compact with two call-to-actions

Code

With title and content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code