Choose standard, small, or xsmall to fit the placement and match nearby text. Heading, body, CTA, and illustration should always scale together to maintain proportions.
illo
Create a standard nudge
Use a nudge to drive specific behaviour that leads to better outcomes for customers or SEEK.
illo
Create a small nudgeUse a nudge to drive specific behaviour that leads to better outcomes for customers or SEEK.
illo
Create an xsmall nudgeUse a nudge to drive specific behaviour that leads to better outcomes for customers or SEEK.Create nudge
Choose an illustration that’s relevant to the user’s situation and set it on a circle with background colour surface.
Display your illustration responsively. As a guide: standard nudges use a medium illustration on desktop and small on mobile; small nudges use small on desktop and xsmall on mobile; xsmall nudges use xsmall on all viewports.
Give your illustration space to breathe by applying responsive padding — roughly xsmall, small or medium depending on the nudge size.
As a general rule of thumb, your illustration (including the white circle) should be roughly equal in height to your content on the left for visual balance.
As a default, a nudge will display horizontally using columns so that heading, text and CTAs align on the left, and the illustration and dismiss button display on the right. These columns collapse and stack on mobile so that the illustration and dismiss button sit above the heading, text and CTA.If you’re placing your nudge in a narrow space, such as a sidebar, you can choose to adopt the stacked layout on desktop and/or tablet (example).Or if you prefer a more compact display, columns can be maintained in narrow spaces (example).