Sidebar block

The sidebar block is available to add secondary content to your pages. For documentation purposes, on this page the sidebar block is displayed in the main section of the page. However, as an aside block, the sidebar block is restricted to the aside layout sections.

Sidebar base example

At a minimum, the sidebar block requires a title and some content.

<div class="u-block u-block--white">
    <div class="b-sidebar">
        <h2>This is the title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
    </div>
</div>

Note on content

Sidebar blocks are intended to be succinct. In general, a single paragraph is recommended. The content needs to be properly formatted HTML. The following HTML tags can be used within the block: <a>, <p>.

<div class="u-block u-block--white">
    <div class="b-sidebar">
        <h2>This is the title</h2>
        <p>Lorem ipsum <a href="https://carleton.ca/">dolor</a> sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
    </div>
</div>

Heading vs title

Sometimes your sidebar block is related to a taxonomy or section of your site that you want to reference. If this is the case you can use what we are calling a heading and move your title into the content area.

<div class="u-block u-block--white">
    <div class="b-sidebar" href="https://carleton.ca">
        <h2 class="sidebar__heading">Ideas@Carleton</h2>
        <h3>This is the title</h3>
        <p>Lorem ipsum sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
        <a class="c-buttoncta" href="https://carleton.ca">Text</a>
    </div>
</div>

Sidebar with image

A single image can be added to the sidebar block.

<div class="u-block u-block--white">
    <div class="b-sidebar">
        <h2>This is the title</h2>
        <img src="https://via.placeholder.com/640x480" alt="" />        <p>Lorem ipsum <a href="https://carleton.ca/">dolor</a> sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
    </div>
</div>

Sidebar with CTA button

If your sidebar block has a conversion goal, add a Call To Action (CTA) button to encourage users to click.

<div class="u-block u-block--white">
    <div class="b-sidebar" href="https://ravendesignsystem.github.io/rds//dev/components/buttons/cta-button/">
        <h2>This is the title</h2>
        <img src="https://via.placeholder.com/640x480" alt="" />        <p>Lorem ipsum <a href="https://carleton.ca/">dolor</a> sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
        <a class="c-buttoncta" href="https://ravendesignsystem.github.io/rds//dev/components/buttons/cta-button/">More about CTA buttons</a>
    </div>
</div>

Turn the entire block into a CTA

If you do have a conversion goal, an even better option is to turn the entire sidebar block into a CTA.

<div class="u-block u-block--white">
    <a class="b-sidebar" href="https://ravendesignsystem.github.io/rds//dev/components/buttons/cta-button/">
        <h2>This is the title</h2>
        <img src="https://via.placeholder.com/640x480" alt="" />        <p>Lorem ipsum sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
        <div class="c-buttoncta">More about CTA buttons</div>
    </a>
</div>

Important note how:

• the b-sidebar div is now an <a>
• the c-buttoncta <a> is now an <div>
• the content can no longer include links. <a> tags are no longer available in the content as only one link is permitted for the entire block in this use case.

With icons

RDS icons are available for both the heading and CTA button areas of the block.

<div class="u-block u-block--white">
    <div class="b-sidebar" href="https://carleton.ca">
        <h2 class="sidebar__heading"><span class="u-icon"><svg viewbox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 0C7.47 0 3.75 3.285 3.75 7.5c0 1.38.825 3.375 1.5 4.5 2.01 3.375 2.67 4.17 3 6v1.5h7.5V18c.33-1.83.99-2.625 3-6 .675-1.125 1.5-3.12 1.5-4.5C20.25 3.285 16.53 0 12 0zm5.46 11.22c-.375.66-.705 1.2-1.005 1.665-1.29 2.115-1.875 3.09-2.175 4.845-.03.075-.03.165-.03.255h-4.5c0-.09 0-.195-.03-.255-.3-1.755-.885-2.745-2.175-4.845-.3-.465-.63-1.005-1.005-1.665-.63-1.05-1.29-2.745-1.29-3.72 0-3.3 3.03-6 6.75-6 1.83 0 3.54.63 4.83 1.785C18.075 4.41 18.75 5.91 18.75 7.5c0 .99-.66 2.67-1.29 3.72zM8.25 21h7.5c-.345 1.71-1.95 3-3.75 3s-3.405-1.29-3.75-3z"  /></svg>
 Ideas@Carleton</h2>
        <h3>This is the title</h3>
        <p>Lorem ipsum sit amet, consectetur adipiscing elit. Cras convallis neque quis enim eleifend luctus. Aliquam erat volutpat. Praesent malesuada dapibus turpis, a aliquam lacus mollis vel.</p>
        <a class="c-buttoncta" href="https://carleton.ca"><span class="u-icon"><svg viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M16.8 9.6V0H7.2v9.6H0L12 24 24 9.6z"/></svg>
 Download now</span></a>
    </div>
</div>