This is an advanced component reserved for use by the UCS Web Team. AEM authors may update existing offset blocks but should not create new ones.
Offset block
The offset block component is a flexible but very advanced component that can combine images, colours, text, links and calls to action. Used only in the full browser window template.
Component(s) you might want to use with this one:
- The Offset block must be embedded in a Grid container component
Design options
There are four different text/image ratio options:
- 45% / 55%
- 50% / 50% (most commonly used)
- 60% / 40%
- 100% / no image
Images can be displayed to the left or to the right of the text.
There are several image offset and text offset options available. Start with the image and text offsets set to “Disabled.” Enter all your content before choosing offsets for your text and image.
Image offset:
- Above container
- 90px from container top
- Above & below container (for tall, vertical images)
- Disabled
Text offset:
- Enabled
- Disabled
- Title over image
The component allows for up to two calls to action and supports a variety of button styles and colours.
Accessibility
- It is important to set the correct Heading level for the block's Title field (found in the Settings tab, under Text settings). The default is H2 (other options are H1 and H3).
- Include Alt text for images (found in the Settings tab, under Image settings).
- Write descriptive calls to action.
Examples and
use cases
This is an Offset block with an H2 heading. The text/image ratio is 50% / 50%. The image is positioned to the right. The image and text offsets are disabled. There are two Call to action buttons.
The settings are described in more detail below and be sure to check out the tips.
Do
Put the Offset block component inside a 1200px wide Grid container.
Add padding to the Grid container. How much will depend on the Offset block's image placement settings. A good starting point is:
- 60px top and bottom on desktop
- 40px top and bottom on mobile
From there, make padding adjustments by looking at the layout in disabled mode (both desktop and mobile views).*
If a background colour is required, set the colour in the Grid container. Use sparingly and if in doubt, use white.
*Preview what the live page would look like with the changes by switching to disabled mode.
To access disabled mode, add ?wcmmode=disabled to the end of the URL.
Example: https://cms-prod-a6-auth1.concordia.ca:5433/cf#/content/concordia/en/web/design/components/offset-block.html?wcmmode=disabled
Grid container component settings to use with the Offset block
Do
Use the default settings for the image and text offset when beginning the design using this component.
Do
Set the correct Heading level for the title.
Do
Use high quality images (no smaller than 940px, no greater than 1920px for width and/or height).
Use the Image crop tools aspect ratio dropdown to crop the image as desired for the layout.
Don't
- Don't put more than one Offset block in a Grid container. Each Offset block should have its own Grid container to properly set padding between Offset block components.
- Don't use H1 unless it is the first heading on your page.
Title
This example does not have a <br> before the title.
Notice how the title is aligned by default with the top of the image.
Title
In this example, two <br> tags were added before the title to push it down and vertically centre this text beside the image.
These <br> tags are ignored on mobile — you won't see extra spacing when viewing the page on a mobile device as you would on a desktop computer.
- The image will always display above the text on mobile.
Need support?
The Web team is here to help.