layout.locked

A feature the current plan does not include, with how to get it: what it does and an action.upgrade

Component

<Layout>

Renders

<div>

Profile

Comes from

SaaS pack

View as Markdown

Example

Preview

Audit log is on the Team plan

See who changed what, and when, for the last year.

<Layout intent="layout.locked">
  <Text intent="text.label">Audit log is on the Team plan</Text>
  <Action intent="action.upgrade" href="/billing">Upgrade to Team</Action>
</Layout>

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

If it is
Use
A feature the current plan does not include, with how to get it: what it does and an action.upgrade
layout.locked this page
A message about the page or the account
layout.notice

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

Built from
surface.noticearrange.stack

For registry authors

Pack intent. prongs add saas puts the saas pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How layout.locked resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

surface.notice

Recessed, bordered strip

surface-inset rounded-lg border border-surface-border

arrange.stack
Children in a column, free to shrink inside a row or grid
```
flex min-w-0 flex-col
```
layout.locked
A feature the current plan does not include, with how to get it: what it does and an action.upgrade
```
items-start gap-3 p-4
```

Final classes

surface-inset rounded-lg border border-surface-border flex
min-w-0 flex-col items-start gap-3 p-4

Definition

'layout.locked': {
  kind: 'semantic',
  description: 'A feature the current plan does not include, with how to get it: what it does and an action.upgrade',
  refs: ['surface.notice', 'arrange.stack'],
  binding: { classes: 'items-start gap-3 p-4' },
  notFor: [
    {
      context: 'a message about the page or the account',
      instead: 'layout.notice',
    },
  ],
},