Menu
Log in
Forgot password

Custom Classes

Card Layouts

You can easily create "card style" layouts like the ones below by adding a special CSS class to any layout section/gadget. Our CSS classes automatically add pre-programmed color, padding and margin attributes to the layout.

To add a CSS class to any layout section, click on the layout to access the Layout's settings panel (left panel). In the settings panel, open the ADVANCED dropdown to find the CSS Class field.  Paste the class into this field.  You can find the CSS class names below.

NOTE: At times, the styles won't automatically render, so you may need to save the page first to see the styles applied. 

Light Card Style

CSS Class = Card-Layout-Light

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Dark Card Style

CSS Class = Card-Layout-Dark

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

White Card Style

CSS Class = Card-Layout-White

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Heading

Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus.

Column Dividers

Dividers add a vertical line between Layout columns. Divider classes can be added to any Layout gadget (ie: 1, 2, 3 or 4 column).

Default Dividers

CSS Class = Dividers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat.

Bright Dividers

CSS Class = Dividers-Bright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat.

White Dividers

CSS Class = Dividers-White

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus. Suspendisse ultricies enim a tortor pulvinar, euismod gravida nibh aliquam. Aenean scelerisque venenatis ligula, in aliquet sem commodo vitae. Donec rutrum efficitur tellus, eu venenatis est pharetra in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus. Suspendisse ultricies enim a tortor pulvinar, euismod gravida nibh aliquam. Aenean scelerisque venenatis ligula, in aliquet sem commodo vitae. Donec rutrum efficitur tellus, eu venenatis est pharetra in.

Faint Dividers

CSS Class = Dividers-Faint

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus. Suspendisse ultricies enim a tortor pulvinar, euismod gravida nibh aliquam. Aenean scelerisque venenatis ligula, in aliquet sem commodo vitae. Donec rutrum efficitur tellus, eu venenatis est pharetra in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et posuere nibh, quis lacinia tellus. Vivamus accumsan nibh vel risus feugiat facilisis. Pellentesque facilisis luctus volutpat. Quisque a rutrum mauris, vel scelerisque risus. Suspendisse ultricies enim a tortor pulvinar, euismod gravida nibh aliquam. Aenean scelerisque venenatis ligula, in aliquet sem commodo vitae. Donec rutrum efficitur tellus, eu venenatis est pharetra in.


12344 56 Street, Toronto, Ontario
A1B 2C3

Contact Information

  • General Inquiries
  • Membership Inquiries
  • Sponsorship Inquiries
  • Events Inquiries
  • Volunteering Inquiries
  • Job Posting Inquiries

Connect on Social

Keep up to date on upcoming events and recent job postings.

Privacy Policy   |   Terms and Conditions   |   Events Policy

Powered by Wild Apricot   |   Built by Merge Creative Inc

Powered by Wild Apricot Membership Software