layout.lockup

An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size

Component

<Layout>

Renders

<div>

Profile

Comes from

starter

View as Markdown

Read https://www.prongs.dev/docs/intents/layout/lockup.md and tell me whether layout.lockup fits what I am building.

Example

Preview

ALAda Lovelace

Only you can see this

<Layout intent="layout.lockup">
  <Media intent="media.person" src={user.avatarUrl} alt={user.name} />
  <Text intent="text.label">{user.name}</Text>
</Layout>

Connections

Choosing between neighbours

If it is
Use
An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size
layout.lockup
A whole item in a list, with its title, actions and details
layout.item
A short line of facts about an item
text.meta
An icon beside its label
rather than layout.badged
layout.lockup

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: 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.lockup 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.

arrange.row
Children in a wrapping row
```
flex flex-row flex-wrap items-center
```
layout.lockup
An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size
```
min-w-0 flex-nowrap gap-2 [&>:not(:last-child)]:shrink-0
[&>:last-child]:min-w-0
```

Final classes

flex flex-row items-center min-w-0 flex-nowrap gap-2
[&>:not(:last-child)]:shrink-0 [&>:last-child]:min-w-0

Definition

'layout.lockup': {
  kind: 'semantic',
  description: 'An icon, avatar or logo beside its text: a person’s photo and name, an icon and its label. The text shrinks and wraps; the icon keeps its size',
  refs: ['arrange.row'],
  binding: {
    classes: 'min-w-0 flex-nowrap gap-2 [&>:not(:last-child)]:shrink-0 [&>:last-child]:min-w-0',
  },
  notFor: [
    {
      context: 'a whole item in a list, with its title, actions and details',
      instead: 'layout.item',
    },
    { context: 'a short line of facts about an item', instead: 'text.meta' },
  ],
},