Site wide CSS and element fixes

Headings

<H1> title - Excepteur sint occaecat cupidatat

<H2> title - Ut enim ad minim veniam

<H3> title - Tempus leo eu aenean sed diam tempus leo eu aenean sed diam

<H4> title - Ad litora torquent per conubia ad litora torquent per conubia

<H5> title - Pulvinar vivamus fringilla lacus litora torquent per conubia
<H6> title - Quisque faucibus ex sapien quisque faucibus ex sapien

<p class="lead">Leading paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p> Regular paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

LIst items

  • Unordered list item 1 - Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
  • Unordered list item 2 - Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
  1. Ordered list item 1 - Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
  2. Ordered list item 2 - Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.

Accordion items

I am adding an onstate for the selected item container and the up and down arrow so we have some user feedback after selecting an item.

Anti-fraud, anti-bribery and corruption policy

We enforce a zero-tolerance approach to fraud, bribery and corruption, implementing stringent measures to prevent, detect and address unethical activities that would diminish the value and impact of donor contributions.

» Read our anti-fraud, anti-bribery and corruption policy

Board diversity & inclusion policy

Our Board brings together people with different backgrounds and perspectives. This diversity informs our decisions and strategies, ensuring stronger decision making by incorporating multiple viewpoints and driving innovation.

» Read our board diversity & inclusion policy

Code of conduct

This sets clear expectations for everyone associated with Plan International Canada. We value respect, honesty and taking responsibility for our actions in all of our interactions.

Panels

Where panels already has a 25px padding on all sides - headings and uls end up creating to much space at the top and bottom of the panels, so i have written a rule to remove top padding for headings and bottom margining for uls.;

Panel title

panel text

panel text

Panel title

panel text

  • panel text
  • panel text
  • panel text

Aligning buttons to bottom

If you have columns that all have a call to action button at the bottom of the column but the columns are of unequal height then the buttons create a ragged line - this fixes that.

To achieve this all you need to do is give the Row that holds the columns a class of "align-buttons"
<row class="align-buttons">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi

button text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

button text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

button text

Spacing classes

Many times we want to overwrite the native padding and margining of elements - either add more or remove - these classes do this.

Classes Example
.pt0 padding-top:0
.pt3 padding-top:3

Join our mailing list to receive updates

By signing up you agree to receive our emails.