Skip to main content

Overlapping

latest

Overlapping allows you to present related information in a visually balanced and appealing way.

Announcing Full FibreSupercharge your business with fibre-to-the-premises.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Offset contentEnterprise? Get in touch and we'll tailor a package to suit your needs.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Responsive overlapping​

Arc implements responsive overlapping using the 12-column grid. This allows individual columns to be pulled up on top of one another. Overlapping should be tested across all viewports and tweaked as necessary.

Overlapping scale​

Overlapping in Arc is implemented using offsets of 24px (the base line height). The offset scale determines how far the column is pulled up from its default baseline.

0
24
48
72
96
120
144
168
192
216
240
264
288
312
336
360
384

Components​

Columns

Overlapping is implemented in Arc's primary layout component, Columns. Use the offsetting feature to add overlapping to your layout.

View the Columns component

In Figma​

Manually offset your elements using an increment of 24px from the scale above.

View the Figma setup guide

Usage guidelines​

Check all breakpoints

It's important to check and tweak overlapping behaviour on all breakpoints to avoid unintended overlapping of content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Offset content wraps below other content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Offset content unintentionally covers other content.