Skip to main content
Apply Visit Give

Offset Block

The offset block component is the most advanced AEM component. It combines an offset image with a title, text and button.

AEM editors can make minor edits to existing offset blocks. For major edits or a new offset block, contact webcoord@concordia.ca. Our designer will ensure they're done to the highest standard.

Uses

The offset block component is used sparingly, mostly on Fine Arts landing pages. It consists of a title, text, button and offset image.

On desktop, the image and text display side by side.

Screenshot showing offset block with text on left and image of dancers on right

On mobile, the image displays first.

Screenshot showing offset block on mobile, with image of dancers followed by text

The offset block sometimes overlaps with another component, like in this example: 

Screenshot of hero that says "Three areas of study" and an offset boock of students in a cinema partly overlapping the hero

Making an excellent offset block requires balancing the image and text, and finetuning the padding, especially on mobile.

For these reasons, AEM editors should only make minor updates to existing offset blocks. For major updates or a new offset block, contact webcoord@concordia.ca.

Best practices

When to edit an offset block

Edit an offset block when the text needs to be updated, or the image is no longer appropriate.

How to edit an offset block

Edit text

  • Make your text edits.
  • The Title may already contain one or more <br> line break elements. A <br> pushes the title down and is used to align the text to the middle of the image on desktop.

    If your text adjustments greatly increase or reduce the amount of text, you may need to remove or add a <br>. Preview and refresh the page to help you decide if the <br> line breaks should be adjusted.

    Note: <br> elements are ignored on mobile.

  • In the Text tab, Calls to action section, include no more than 2 calls to action. Including more crowds the offset block and makes it harder for your visitors to decide what to do next.
  • Preview and refresh the page. 
  • If your edits result in the text being one or more lines longer or shorter than before, contact webcoord@concordia.ca before you activate the page. Our designer will check the balance and spacing between image and text, and make any needed adjustments.

Change an image

  • Choose a new image that has the same orientation as the previous image. For example, replace an existing vertical image with a new vertical image.
  • Ideally, choose a new image that has the same aspect ratio as the previous image. For example, replace an existing 3:2 image with a new 3:2 image.
  • Clear the existing image and add the new one.
  • In Settings / Image settings, update the Title, Alt text and, if relevant, the Photo caption/credit.
  • Leave the Settings / Layout settings as is.
  • Preview and refresh the page.
  • If the new image had a different aspect ratio than the old one, or if anything looks less than excellent, contact webcoord@concordia.ca. Our designer will review the offset block and make any needed adjustments.

Background colour

Every offset block is contained within its own grid container component, which sometimes has a background colour. To maintain the integrity of the page design, leave the background colour as is.

Accessibility

  • Ensure the Button text is clear and concise. For example:
    • View Design Projects
    • Browse Graduate Programs
    • Visit our facilities
  • In the Settings tab, under Text settings, leave the Heading level as is.
  • In the Settings tab, under Image settings, include a Title and Alt text for the image.

Try it out!

Edit an offset block on our practice page

© Concordia University