Skip to content
Nucleus Docs

Lockup

<ns-lockup>
Overview Guidance Implementation

Overview

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

Examples

Configure

Guidance

Implementation

Placement

The ns-lockup component can only be used as a child of the <ns-panel> element.

Specification

Attributes

decoration

Property
decoration
Description
The name of the illustration to display on the lockup.
Type
string

reverse

Property
reverse
Description
Whether the lockup order should be reversed.
Type
boolean
Default
false

ratio

Property
ratio
Description
The ratio of the image.
Type
16 / 9 4 / 3 1 / 1
Default
4 / 3

type

Property
type
Description
The type of the lockup.
Type
lockbox locknut lockjaw
Default
lockbox

Slots

SlotPermitted tagsDescription
heading<h2> The heading of the lockup.
paragraph<p> The paragraph of the lockup.
cta<ns-cta> <a> The CTA for the lockup.
image<ns-image> <ns-video> The image for the lockup.

This page covers most of the ways you can use ns-lockup. Please reach out to us if you are unsure about a potential use. Here are some useful links to related content: