Combo – clockwise from right top

Intro paragraph sizing. Text above is H2.

Note that if you make the text too long here, you will have spacing appear under the #2 block (the image on the left.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Combo – clockwise from left top

Intro paragraph sizing. Text above is H2.

Lighter gray background.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent.

Light red background selected, with light text.

Note that the button goes to a white line if you select certain background colours.

Don’t make this text too long or it will push this box past the bottom of the #2 image! (or use a longer image)

This is the CTA description.

 
Right-pos CTA

Combo – counterclockwise from right top

Intro paragraph sizing. Text above is H2.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Combo – counterclockwise from left top

Intro paragraph sizing. Text above is H2.

Lighter gray background. Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias.

Light red background selected, with light text.

Note that the button goes to a white line if you select certain background colours.

Don’t make this text too long or it will push this box past the bottom of the #2 image! (or use a longer image)

This is the CTA description.

 
Right-pos CTA

“Layout” block – 2 components

This is component 1. This is great for side by size image/text or text/image layout blocks.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

“Layout” block – 3 components

This is component 2. Component 1 is a long box (good for images) spanning the height of the boxes on the right side.

“Layout” block – 4 components

This is component 1. Use for when component 1 is long next to a short image, for example. It’s similar to the combo boxes on the surface but you can’t change the direction or starting point, and it’s better when the text is longer than the images if you are going Text -> Image -> Text -> Image.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea. Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

 

This is component 3 – heading level 3

The 5 item layout is good if the text in component 3 matches the image length in component 4.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea. Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

“Layout” block – 5 components

This is component 1. The component 2 image should be long if your component 5 text is long.

This is component 3 – heading level 3

The 5 item layout is good if the text in component 3 matches the image length in component 4.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

 

Component # 5

The layout grid curls around so that the last component is up here. It makes sense when you look at the “unwrapped” view of this on mobile.

Email list with small heading 6 title

President – Mark Rutlege CDP Email
Past President – Johnathon Strebly CDP Email
Executive Director – Melanie MacDonald Email
Treasurer – Johnathon Strebly CDP Email
Secretary – Steven Rosenberg CDP, Fellow Email
Certification – Michael Cober CDP Email
Education – Aidan Rowe CDP Email
Membership – Craig Cullimore CDP Email
Communications – Dennis Boyle CDP Email
Ethics – Matt Warburton CDP, Fellow Email
GDC Foundation – Peggy Cady CDP, Fellow Email
Sustainability – Steven Cretney CDP Email

“Layout” block – 6 components

This is component 1. This layout is good when the top and bottom of the right side have short images. Note that we have “light text” selected but the style sheet prevents the user from overriding the body text as it would not be accessible with light over this grey colour. The H2 heading is likely large enough that this is not an issue but be sure to use the colour combos carefully.

Intro here Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea. ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

This is component 3 – heading level 3

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Component # 5

Useful layout when there is a big block of text at the bottom next to a small image.

Email list with small heading 6 title

President – Mark Rutlege CDP Email
Past President – Johnathon Strebly CDP Email
Executive Director – Melanie MacDonald Email
Treasurer – Johnathon Strebly CDP Email
Secretary – Steven Rosenberg CDP, Fellow Email
Certification – Michael Cober CDP Email
Education – Aidan Rowe CDP Email
Membership – Craig Cullimore CDP Email
Communications – Dennis Boyle CDP Email
Ethics – Matt Warburton CDP, Fellow Email
GDC Foundation – Peggy Cady CDP, Fellow Email
Sustainability – Steven Cretney CDP Email

“Layout” block – 7 components

This is component 1.

Intro here Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea. ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

This is component 3 – heading level 3

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

This image is component #4. It has a caption to show how those work.

Component # 5

This layout is great when you want a couple blocks of text surrounded by images. Use the bleed left and right or shift left/right options in the components to control how the whitespace in the components works. This one is shifted left so it is taking up 6 columns but is moved leftward by the width of the universal padding size.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.

Component #7. This is the maximum amount one layout can have. It’s usually better to combine smaller layouts but this made sense for the designs as seen in the Legacy page when the site was being developed.

Lorem ipsum dolor sit amet, at mea discere nominavi. Per an doctus explicari, mea no mentitum scribentur. Vim in dico vocent. Vitae nominati elaboraret id cum, ea eam recusabo prodesset dissentias. Quando voluptaria ius an, lorem eirmod veritus te has, tation veritus quo ei. Ut alienum adipisci gloriatur nam, eam errem tractatos theophrastus ea.