Avatar
Two-Line Title
Карточка человека, где должность занимает ровно две строки: место зарезервировано, хвост срезан, и ряд карточек не пляшет по высоте.
- avatar
- profile
- grid
- truncation
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/avatar-030
Мария ГуроваРуководитель направления клиентского опыта
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «avatar-030» (Two-Line Title) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/avatar-030.json
Registry item: https://vibeui.ru/r/avatar-030.json
Ставится в: components/vibeui/avatar-030.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Карточка человека, где должность занимает ровно две строки: место зарезервировано, хвост срезан, и ряд карточек не пляшет по высоте.
Карточка человека для сетки: должность занимает ровно две строки, поэтому карточки в ряду одинаковой высоты при любой длине текста. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Avatar030 } from "@/components/vibeui/avatar-030"
<Avatar030
name="Мария Гурова"
role="Руководитель направления клиентского опыта"
size="md"
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-avatar-030-* и не подменять её токенами вашей темы
- min-height ровно на две строки: без него короткая должность поднимает карточку выше соседних
- line-clamp вместо свободного переноса — третья строка ломает ряд
- высоту строки в переменной: min-height и line-height обязаны считаться из одного числа
- полный текст должности в title — обрезка не должна терять смысл насовсем
- собственную светлую подложку карточки: без неё тёмный текст пропадает на тёмном фоне
## 6. Можно менять
- имя и должность через role
- размер портрета через size — sm, md или lg
- число строк должности в line-clamp вместе с min-height
- ширину карточки через max-width
## 7. Правила
- Две строки — это решение про сетку: в одиночной карточке ограничение не нужно.
- Подсказка title не появляется на телефоне: длинную должность лучше сокращать в данных, а не в вёрстке.
- Меняя число строк, правьте line-clamp и min-height вместе, иначе резерв разъедется с обрезкой.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/avatar-030.jsonhttps://vibeui.ru/r/avatar-030.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-avatar-030-*. Серверный: хуков нет. Должности в реальных списках разной длины — «Дизайнер» и «Руководитель направления клиентского опыта»; свободный перенос разваливает высоту карточек в ряду, а обрезка в одну строку съедает половину смысла. Место под две строки зарезервировано min-height от переменной строки, а хвост режется -webkit-line-clamp. Полный текст остаётся в title, поэтому обрезка ничего не теряет насовсем.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Avatar030Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
name?: string
role?: string
size?: "sm" | "md" | "lg"
}
// Идея компонента: карточка человека для сетки, где должность занимает ровно
// две строки. Должности в реальных списках разной длины — «Дизайнер» и
// «Руководитель направления клиентского опыта»; если дать тексту течь как
// придётся, карточки в ряду встанут разной высоты, а обрезка в одну строку
// съест половину смысла. Место под две строки зарезервировано min-height, а
// хвост режется line-clamp: высота фиксирована, содержимое остаётся читаемым.
const STYLES = `
:where([data-vibeui-block="avatar-030"]){
--vibeui-avatar-030-size:3.5rem;
--vibeui-avatar-030-line:1.0625rem;
--vibeui-avatar-030-bg:oklch(1 0 0);
--vibeui-avatar-030-fg:oklch(0.24 0.014 265);
--vibeui-avatar-030-muted:oklch(0.5 0.014 265);
--vibeui-avatar-030-border:oklch(0.91 0.006 265);
--vibeui-avatar-030-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: тёмный текст обязан читаться на любом фоне. */
[data-vibeui-block="avatar-030"]{
display:flex;flex-direction:column;align-items:center;gap:0.5rem;
box-sizing:border-box;width:100%;max-width:11rem;
padding:1rem 0.875rem 1.125rem;text-align:center;
background:var(--vibeui-avatar-030-bg);
border:1px solid var(--vibeui-avatar-030-border);border-radius:1rem;
font-family:var(--vibeui-avatar-030-font);color:var(--vibeui-avatar-030-fg);
}
[data-vibeui-block="avatar-030"] *{box-sizing:border-box}
[data-vibeui-block="avatar-030"] [data-part="face"]{
display:grid;place-items:center;flex:none;
width:var(--vibeui-avatar-030-size);height:var(--vibeui-avatar-030-size);
border-radius:9999px;
background:oklch(0.9 0.06 var(--vibeui-avatar-030-hue,265));
color:oklch(0.36 0.12 var(--vibeui-avatar-030-hue,265));
font-size:calc(var(--vibeui-avatar-030-size) * 0.32);font-weight:700;line-height:1;
}
[data-vibeui-block="avatar-030"] [data-part="name"]{
width:100%;font-size:0.9375rem;font-weight:650;line-height:1.2;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Ровно две строки: место зарезервировано, хвост срезан. */
[data-vibeui-block="avatar-030"] [data-part="role"]{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
width:100%;overflow:hidden;
min-height:calc(var(--vibeui-avatar-030-line) * 2);
font-size:0.75rem;line-height:var(--vibeui-avatar-030-line);
color:var(--vibeui-avatar-030-muted);
}
[data-vibeui-block="avatar-030"][data-size="sm"]{--vibeui-avatar-030-size:2.75rem;max-width:9.5rem}
[data-vibeui-block="avatar-030"][data-size="lg"]{--vibeui-avatar-030-size:4.5rem;max-width:12.5rem}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="avatar-030"] *{animation:none!important;transition:none!important}}
`
function hue(name: string) {
let hash = 2166136261
for (const symbol of name) {
hash ^= symbol.codePointAt(0)!
hash = Math.imul(hash, 16777619)
}
return ((hash >>> 0) % 12) * 30
}
function initials(name: string) {
return name
.split(" ")
.slice(0, 2)
.map((part) => part.charAt(0).toUpperCase())
.join("")
}
/**
* Карточка человека с должностью ровно в две строки: сетка не пляшет по высоте.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Avatar030({
name = "Мария Гурова",
role = "Руководитель направления клиентского опыта",
size = "md",
className,
style,
...props
}: Avatar030Props) {
const palette = {
"--vibeui-avatar-030-hue": hue(name),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-avatar-030" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="avatar-030"
data-size={size}
className={className}
style={palette}
>
<span data-part="face" aria-hidden="true">
{initials(name)}
</span>
<span data-part="name">{name}</span>
{/* Полная должность остаётся в title: обрезка не должна её терять. */}
<span data-part="role" title={role}>
{role}
</span>
</div>
</>
)
}