Skip to main content



Lockups are a promotional component that signpost to a product or service, highlighting key messages.

We use lockups to engage customers, in particular to promote a key product or service. The more relevant and contextual the content is for intended customers, the better.

Content guidance#

Lockup - Lockjaw

KeyField typeGuidelines
AHeadingThe recommended length is between 4 and 12 words, not exceeding 50 characters in total.
BContentns-lockup can accommodate multiple paragraph slots. However, be mindful of keeping it concise. Our guidance is a maximum of 2 short paragraphs, each with no more than 3 lines each. Can contain bold copy <b>, inline links <a>, lists <ul> <ol>, and a caveat at the end of the relevant paragraph if required <a href="#caveat">1</a>.
CCTAKeep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
DImageThere is a choice between 3 image sizes - the first has an aspect ratio of 16:9, the dimensions should be 800 x 450px, the second has an aspect ratio of 4:3, the dimensions should be 800 x 600px, and the third has an aspect ratio of 1:1, the dimensions should be 800 x 800px. Both versions should be jpg file types, and the file size should be no more than 100kb. To see which image you can use - please see the Image guidance section below. Don't use imagery with white backgrounds. Please make sure you work with a designer when selecting any imagery for the ns-lockup.
EDecorationUse this optional illustration to support and highlight the content. The illustration should relate to the product or service you are talking about. The specification table has a list of options.

Image guidance#

ns-lockup-image-16_916:9800 x 450px<100kb.jpgns-lockup-image-800x540-ratio16_9
ns-lockup-image-4_34:3800 x 600px<100kb.jpgns-lockup-image-800x600-ratio4_3
ns-lockup-image-1_11:1800 x 800px<100kb.jpgns-lockup-image-800x800-ratio1_1

Best practice#

💚 Do's💔 Don'ts
Use the key message in the headingInclude more than one CTA
Keep the heading length to 4-12 wordsExceed more than two paragraphs of 3 lines each
Consider the focal point of the image at across different viewportsUse images that have any important part obscured by the overlap
Optimise the lockup image (see Optimise your images)Use images with a white background

Considerations of best practices#

  • Alternate the position of image/video when using more than one lockup.
  • Paragraph works best as a single, short paragraph.
  • Use real-life photographs.


View example on Storybook

Component placement#

The ns-lockup component can only be used in the ns-panel component.


typestringlockboxlockjaw, lockbox, locknutAt present, these three styles share identical visual and functional features; however, there is a possibility that they will diverge in the future.
reversebooleanfalsetrue, falseSwitches the order of the text and image. Default (false) is text to the left.
ratiostring4x34:3, 16:9, 1:1Ratio for the image.
decorationstringSee ns-illustration component in StorybookAdds an illustration overlapping the image.
headingh2 tag
paragraph<p>, <a>, <ul>, <ol>, <li>
imagens-image ns-video

Specification notes#


  • Should be a h2 tag.
  • Heading uses an h1 class.



  • Use the video variant when using a video instead of an image as the overlap is in front of the text box so neither the video nor its captions are obscured. The text then wraps around the video edge. (See the video example on Storybook)
  • It is not possible to use an illustration decoration with a video.
  • Use the video's YouTube link as the id attribute's value.


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.