ns-lockup

Introduction#

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

Key	Field type	Guidelines
A	Sub-heading	Sub-headings are used to indicate the primary section or to reinforce a brand message. Short and simple words tend to work better and it is recommended to keep the length between 1 and 5 words. Include a full stop at the end of the sub-heading.
B	Heading	The recommended length is between 4 and 12 words, not exceeding 50 characters in total. Headings contain light and bold font weight to highlight key messaging.
C	Content	`ns-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>`.
D	CTA	Keep the text ‘short, relevant, and actionable’. It should not exceed more than 24 characters.
E	Image	There is a choice of two image sizes depending on your choice of Lockup - the first has an aspect ratio of 4:3, the dimensions should be 720x540px, the second has an aspect ratio of 1:1, the dimensions should be 720x720px. 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 Guidence 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`.
F	Decoration	Use this optional illustration to support and highlight the content. The illustration should relate to the product or service you are talking about. Only available on the Lockjaw and Locknut variants. The specification table has a list of options.

Image guidance#

Component	Variant	Ratio	Dimensions	Size	Type	Placeholder
`ns-lockup`	`lockbox`	4:3	720x540px	< 100kb	jpeg	ns-lockup-lockbox-720x540px
`ns-lockup`	`lockbox`	1:1	720x720px	< 100kb	jpeg	ns-lockup-lockbox-720x720px
`ns-lockup`	`lockjaw`	4:3	720x540px	< 100kb	jpeg	ns-lockup-lockjaw-720x540px
`ns-lockup`	`locknut`	1:1	720x720px	< 100kb	jpeg	ns-lockup-locknut-720x720px

Best practice#

💚 Do's	💔 Don'ts
Embolden the key message in the heading	Include more than one CTA
Keep the heading length to 4-12 words	Exceed more than two paragraphs of 3 lines each
Keep subheading length between 1-5 words	Use images with a white background
Optimise the lockup image (see image optimise LINK)

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.

Usage#

View example on Storybook

Component placement#

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

Specification#

Attribute	Type	Default	Options	Description
`type`	`string`	`lockbox`	`lockjaw`, `lockbox`, `locknut`	Different style variants.
`reversed`	`boolean`	`false`	`true`, `false`	Switches the order of the text and image. Default is text to the left.
`ratio`	`string`	`4x3`	`4:3`, `16:9`, `1:1`	Ratio for the image.
`decoration`	`string`		See Illustration component in Storybook	Adds illustration between the text and image.

Slots	Type
`heading`	`h2 tag`
`paragraph`	`<p>`, `<a>`, `<ul>`, `<ol>`, `<li>`
`cta`	`ns-cta`
`image`	`ns-image` `ns-video`

Specification notes#

Heading#

Should be a h2 tag.
The sub-heading is part of the heading to allow screen readers to read the heading properly.
Sub heading is a <span> tag with a h5 class.
Main heading is a <span> tag with a h1 class.
enlighten class in the main heading <span> to make the heading light.
- Use <b> tag to embolden specific text.

Design Tokens

You can change the branded look and feel of the ns-lockup by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "card": {
    "paragraph": {
      "typography": "p-feature"
    },
    "spacer": {
      "basketball-court": {
        "outside-right": "12.5%",
        "outside-left": "12.5%"
      }
    }
  },
  "image": {
    "spacer": {
      "basketball-court": {
        "outside-right": "12.5%",
        "outside-left": "12.5%"
      },
      "hockey-pitch": {
        "outside-right": "0",
        "outside-left": "0"
      }
    }
  },
  "lockjaw": {
    "card": {
      "spacer": {
        "inside-top": "1.5rem",
        "inside-bottom": "1.5rem",
        "outside-right": "5%",
        "outside-left": "5%",
        "basketball-court": {
          "inside-top": "3rem",
          "inside-bottom": "3rem",
          "outside-left": "12.5%",
          "outside-right": "12.5%"
        },
        "hockey-pitch": {
          "outside-left": "0",
          "outside-right": "4rem"
        }
      }
    },
    "image": {
      "spacer": {
        "outside-left": "5%",
        "basketball-court": {
          "outside-left": "12.5%",
          "outside-right": "12.5%"
        },
        "hockey-pitch": {
          "outside-right": "0",
          "outside-left": "0"
        }
      }
    },
    "reverse": {
      "spacer": {
        "rugby-pitch": {
          "inside-right": "9rem",
          "inside-left": "0"
        }
      },
      "card": {
        "spacer": {
          "hockey-pitch": {
            "outside-right": "0",
            "outside-left": "4rem"
          }
        }
      }
    },
    "spacer": {
      "rugby-pitch": {
        "inside-left": "9rem"
      }
    }
  },
  "lockbox": {
    "drop-shadow": [
      "rgba(170, 170, 170, 0.40) -3px 3px 10px",
      "rgba(51, 51, 51, 0.05) -20px 20px 20px"
    ],
    "image": {
      "spacer": {
        "outside-right": "5%",
        "basketball-court": {
          "outside-right": "12.5%"
        },
        "hockey-pitch": {
          "outside-right": "0",
          "outside-top": "2.5rem"
        }
      }
    },
    "card": {
      "box-shadow": [
        "rgba(170, 170, 170, 0.05) 0px 0px 0px 1px"
      ],
      "spacer": {
        "basketball-court": {
          "outside-right": "0",
          "outside-left": "0"
        }
      }
    }
  },
  "locknut": {
    "spacer": {
      "rugby-pitch": {
        "inside-left": "9rem",
        "inside-right": "9rem"
      }
    },
    "image": {},
    "card": {
      "spacer": {
        "inside-top": "1.5rem",
        "inside-bottom": "1.5rem",
        "basketball-court": {
          "inside-top": "3rem",
          "inside-bottom": "3rem"
        },
        "hockey-pitch": {
          "inside-top": "4rem",
          "inside-bottom": "4rem",
          "outside-right": "4rem",
          "outside-left": "0"
        }
      }
    },
    "reverse": {
      "card": {
        "spacer": {
          "hockey-pitch": {
            "outside-left": "4rem",
            "outside-right": "0"
          }
        }
      }
    }
  }
}

Feedback#

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.

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!