Перейти к содержимому
opensophy

Карточки

Подсвеченный блок

Контейнер с подсветкой для акцентирования внимания на важном контенте.

HighlightBox

Контейнер с подсветкой для акцентирования внимания на важном контенте. При активном состоянии использует акцентный цвет темы.

Интерактивное демо

Это важный контент, который нужно подсветить.

Пропсы

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Props = {
		active?: boolean;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let { active = false, class: className = '', children }: Props = $props();
</script>

<div
	class={cn(
		'rounded-md p-4 transition-colors duration-150',
		active ? 'bg-accent/5 ring-1 ring-accent/20' : 'bg-background-inset',
		className
	)}
>
	{@render children?.()}
</div>

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Props = {
		active?: boolean;
		class?: string;
		children?: import('svelte').Snippet;
	};

	let { active = false, class: className = '', children }: Props = $props();
</script>

<div
	class={cn(
		'rounded-md p-4 transition-colors duration-150',
		active ? 'bg-accent/5 ring-1 ring-accent/20' : 'bg-background-inset',
		className
	)}
>
	{@render children?.()}
</div>

Примеры использования

Активное состояние

Важное уведомление с акцентной подсветкой.

<HighlightBox active={true}>
	<p>Важное уведомление с акцентной подсветкой.</p>
</HighlightBox>
<HighlightBox active={true}>
	<p>Важное уведомление с акцентной подсветкой.</p>
</HighlightBox>

Неактивное состояние

Обычный блок без подсветки.

<HighlightBox active={false}>
	<p>Обычный блок без подсветки.</p>
</HighlightBox>
<HighlightBox active={false}>
	<p>Обычный блок без подсветки.</p>
</HighlightBox>

Сложный контент

Заголовок

Описание с дополнительной информацией и деталями.

<HighlightBox active={true}>
	<h4>Заголовок</h4>
	<p>Описание с дополнительной информацией.</p>
</HighlightBox>
<HighlightBox active={true}>
	<h4>Заголовок</h4>
	<p>Описание с дополнительной информацией.</p>
</HighlightBox>

Пропсы

Пропс Тип По умолчанию Описание
active boolean false Активное состояние с акцентной подсветкой
class string — Дополнительные классы