Sidebars

Sidebars are vertical columns placed to the right or left of a webpage's main content. They can be used much like Callout Boxes in order to organize content (especially that which is text-based), and in separating blocks of content or chunking materials. However, sidebars are more useful for supplementary or secondary information, such as "nice-to-know" info, navigational links, or reminders. Especially when placed on the right-hand side, it might not be the best choice for sharing very important or essential content.

Be careful with your colour choices; if the contrast between the background colour and the text colour is not high enough, it can be difficult to read and/or cause accessibility issues. To make sure you are compliant with WCAG accessibility requirements, check your work with a WCAG colour checker tool (e.g., the WCAG Color contrast checker Chrome extension).

Another thing to watch out for is the mobile experience and being careful with the "width" attribute. If your sidebars are too narrow, they can be very, very skinny in a mobile view. It's good to test in a mobile view if this might be a concern.

---

Sidebar to the Right:

Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.

Code snippet:

<div style="float: right; background-color: #e1edcc; width: 33%; margin: 5px 0px 5px 20px; padding: 15px; border-radius: 15px;">
    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
    <p>Put the content of the box here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat.</p>
</div>
<p>Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.</p>

---

Sidebar to the Left:

Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.

Code snippet:

<div style="float: left; background-color: #e1edcc; width: 33%; margin: 5px 20px 5px 0px; padding: 15px; border-radius: 15px;">
    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
    <p>Put the content of the box here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat.</p>
</div>
<p>Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.</p>

---

Alternate Style:

Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.

Code snippet:

<div style="float: right; border: 3px solid #0B6A41; width: 33%; margin: 5px 0px 5px 20px; padding: 15px; background: #eee;">
    <h3 style="text-align: left;"><span style="font-size: 14pt;"><strong>Heading</strong></span></h3>
    <p style="text-align: left;">Put the content of the box here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat.</p>
</div>
<p>Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.</p>

---

Dual Colours:

Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.

Code snippet:

<div style="float: right; width: 33%; margin: 5px 0px 5px 20px; padding: 15px;">
    <h2 style="margin-bottom: 0; padding: 15px; border-radius: 0; border-style: none; border-width: 0; color: #ffffff; background: #0B6A41;"><strong>Heading</strong></h2>
    <div style="margin-bottom: 1.35em; padding: 15px; border-radius: 0; border-style: none; border-width: 0; color: #000; background: #d6d6d4;">
        <p>Put the content of the box here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat.</p>
    </div>
</div>
<p>Put the main body text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus aliquet arcu vitae fringilla. Cras maximus arcu vitae semper viverra. Aliquam erat volutpat. Nullam luctus volutpat odio at commodo. Duis turpis massa, efficitur congue felis nec, ullamcorper scelerisque lectus. Cras convallis auctor arcu eu mattis. Sed id cursus nibh, quis maximus risus. Sed ac posuere dui. Morbi tellus nulla, imperdiet in nulla nec, fermentum tristique ipsum. Nam efficitur placerat semper. Nunc mollis massa vitae dignissim porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla lacus lorem, vulputate semper ornare a, egestas vulputate odio. Duis at mi quam. Integer sed odio ut nisl dignissim rutrum.</p>

---