1. You are here:
  2. Home
  3. Styleguide & Toolkit
  4. Widgets
  5. Using Content Section Widgets

Using Content Section Widgets

Content sections are used within the IoIC design framework to demarcate areas of content on a page.

Standard background colours are white and IoIC's brand grey. A white background content section simply uses the standard ReadyMembership widget with 'Background Colour' set to transparent and 'Container' set to true (as per this block of content).

You may also choose a widget with a primary brand colour for a given section — for example, 'Membership' uses blue and 'Events' uses yellow.

Instructions for each are provided below. By viewing this page in edit mode, you can see how the content library items are used to wrap the standard page sections.

H2 - Content Section Widget Configuration - Blue

To create a 100% width blue background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper blue OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Grey

To create a 100% width grey background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper grey OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Lavender

To create a 100% width lavender background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper lavender OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Yellow

To create a 100% width yellow background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper yellow OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Pink

To create a 100% width pink background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper pink OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Mint

To create a 100% width mint background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper mint OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Beige

To create a 100% width beige background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper beige OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

 

H2 - Content Section Widget Configuration - Black

To create a 100% width black background section you need to use a combination of 

Step 1: Embed the Content Library widget 'Custom: section-wrapper black OPEN'

Step 2: Embed a Content Section widget with the following settings:

  1. Background colour: transparent
  2. Background image: none
  3. Container: true
  4. Remove padding: false

Step 3: Embed the Content Library widget 'Custom: section-wrapper CLOSE'

Here's a link to test - should be white!