Website Documentation: Cannot Do

Why:

Due to limitations of the website grid system of where things can be placed in proximity to each other.

Workaround:

Using the "Gutters Pressed Together" setting for the section, is the best way to get two CTAs nearest to each other. This only works if the CTAs are on the same horizontal plane and CTAs are separated as different vertical columns.

Best Practice:

Keep future designs and updates with adequate spacing, refraining from closely paired CTAs. Using only one CTA per block of content.

Why:

The icon and text below are tied together in vertical alignment. 

Workaround:

Instead of using the icon/text block, use a image and text/CTA block combination instead. This will usually create more space between the image and text/CTA block, but it achieves the center-aligned image and left-aligned text block.

Best Practice:

Designs and updates should be built with the icon and text parts in the same vertical alignment.

Why:

The system defaults the CTA in the hero area to be placed on the left.

Workaround:

Currently no workaround, as it's within brand guidelines to use specifically designed hero images that work with the CTA on the left.

Best Practice:

Make sure all designs and updates are built with the CTA on the left-hand side of the hero area.

Why:

The system doesn't allow custom, pixel by pixel, adjustment of images once placed. The location is locked into preset settings.

Workaround:

Crop or adjust image (deleting available excess white space), if possible, so the image moves within it's grid slot.

Best Practice:

Because this issue usually comes up with it involves two or more images near each other, make sure all images involved are similar to same dimensions. Having large differences in image dimensions is what causes them to settle differently.

Why:

The system isn't built to readily add buttons inside accordions like it does for other parts of the website.

Workaround:

Add a new paragraph then just add a hyperlinked text.

Or:

IMPORTANT NOTE:

This is only possible if you have full access to the website (ability to use full HTML or HTML as a text format). If you do not have this access, please ask Marc or Andrew. 

How:

• Must make sure "Text format" within Layout Builder is using "HTML" and not "Basic HTML".

See code below for example

Best Practice:

Use designs that don't included buttons inside accordions.

Why:

When you use the standard bullet point function from the Layout Builder within a disclaimer text field, the text is actually offset and incorrectly placed in a different row.

Workaround:

Go into Source to access the HTML, then add the bullet point character itself into the copy.

Best Practice:

Use designs that don't included bullet points inside disclaimers. The same can be said for ordered number lists and dashes as well.

It is possible to code in 2 tables side by side, but the system doesn't support having them in close proximity of each other. It will by default push them away from each other. 

If your goal is to have 2 tables coded it, it is best to design them in a vertically stacked layout instead.