Журнал Тильды
/
Библиотека промптов
/
4 преимущества с иконкой, крупным числом и описанием, одно выделено акцентным цветом
4 преимущества с иконкой, крупным числом и описанием, одно выделено акцентным цветом
Ключевые цифры в высоких карточках-капсулах: одна всегда выделена цветом, а остальные заливаются им при наведении.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Создай 4 высокие карточки-капсулы метрик, фон #D9E1EF. Arial, основной синий #1432F5, светло-синий #8EA0F5, белый #fff.
Контент в HTML: 4 article, тексты/числа data-tilda-edit="y", звёзды inline SVG. Без генерации контента через JS/массивы/innerHTML/canvas. Числа статичные и редактируемые, без счётчика. JS только для появления и клавиатуры. В редакторе всё редактируемо, эффекты/перехват кликов отключены.
Секция width:100%, padding:110px 20px 120px, overflow:hidden. Контейнер max-width:1160px по центру. Слева заголовок «A Smarter Way to Show
What Matters Most»: синий, clamp(42px,5vw,72px), bold, line-height:1.1, трекинг -.02em, max-width:820px, margin-bottom:96px.
Сетка 4 равные колонки, gap:40px, align-items:start. Карточка min-height:590px, radius:200px — округлые верх и низ, контур 1.8px #1432F5, фон как у секции, padding:72px 36px 48px. Контент вертикально по центру. Без теней, кнопок и ссылок. Сверху синяя пятиконечная звезда 56×56px, margin-bottom:22px. Ниже метка uppercase 13px regular, трекинг .12em, #8EA0F5, margin-bottom:16px. Число clamp(80px,8vw,118px), regular, line-height:.94, трекинг -.03em, синее, margin-bottom:28px. Затем разделитель 145×1px #8EA0F5, margin-bottom:28px. Описание синее 15.5px/1.5, max-width:180px, по центру.
Метка | число | описание:
Performance | 65 | Faster decision-making with clear benefit highlights
Reach | 97 | Higher engagement with structured visual content
Interaction | 17 | User actions completed through optimized journeys
Access | 43 | Always-available information, support, and value
Access всегда синяя, звезда, метка, число, линия и описание белые. Первые три контурные. Hover любой карточки: синий фон и белое содержимое, translateY(-6px) scale(1.01); соседние opacity:.93. Переход фона/рамки 300ms, цвета и движения 280ms, easing cubic-bezier(.22,1,.36,1). Уход возвращает исходное оформление, Access остаётся синей. Не делай единую активную карточку.
При первом появлении 12% секции: заголовок opacity:0→1, translateY(16px→0) за 750ms. Карточки появляются по очереди через 500+i*110ms из opacity:0, translateY(16px) в видимое положение; движение 280ms с тем же easing. Вход однократный. Добавь tabindex:0; Enter/Space переключают у выбранной карточки оформление как при hover, без навигации.
≤960px: секция padding:80px 24px 90px; заголовок margin-bottom:64px; сетка 2 колонки, gap:28px; карточки min-height:500px, padding:60px 28px 42px.
≤640px: секция 64px 20px 72px; 2 колонки, gap:20px; карточки min-height:440px, padding:52px 22px 36px, radius:160px; звезда 44px с отступом 16px, описание 14px/max-width:150px, разделитель 110px.
≤480px: секция 52px 16px 60px; заголовок margin-bottom:48px; одна колонка max-width:320px по центру, gap:20px; карточки min-height:520px, padding:64px 36px 48px, radius:180px; звезда 50px с отступом 20px, описание 15px/max-width:210px, разделитель 130px.
Изолируй CSS/JS. Без IntersectionObserver всё видно. Reduced-motion: без перемещений/задержек, только opacity и цвет.
Контент в HTML: 4 article, тексты/числа data-tilda-edit="y", звёзды inline SVG. Без генерации контента через JS/массивы/innerHTML/canvas. Числа статичные и редактируемые, без счётчика. JS только для появления и клавиатуры. В редакторе всё редактируемо, эффекты/перехват кликов отключены.
Секция width:100%, padding:110px 20px 120px, overflow:hidden. Контейнер max-width:1160px по центру. Слева заголовок «A Smarter Way to Show
What Matters Most»: синий, clamp(42px,5vw,72px), bold, line-height:1.1, трекинг -.02em, max-width:820px, margin-bottom:96px.
Сетка 4 равные колонки, gap:40px, align-items:start. Карточка min-height:590px, radius:200px — округлые верх и низ, контур 1.8px #1432F5, фон как у секции, padding:72px 36px 48px. Контент вертикально по центру. Без теней, кнопок и ссылок. Сверху синяя пятиконечная звезда 56×56px, margin-bottom:22px. Ниже метка uppercase 13px regular, трекинг .12em, #8EA0F5, margin-bottom:16px. Число clamp(80px,8vw,118px), regular, line-height:.94, трекинг -.03em, синее, margin-bottom:28px. Затем разделитель 145×1px #8EA0F5, margin-bottom:28px. Описание синее 15.5px/1.5, max-width:180px, по центру.
Метка | число | описание:
Performance | 65 | Faster decision-making with clear benefit highlights
Reach | 97 | Higher engagement with structured visual content
Interaction | 17 | User actions completed through optimized journeys
Access | 43 | Always-available information, support, and value
Access всегда синяя, звезда, метка, число, линия и описание белые. Первые три контурные. Hover любой карточки: синий фон и белое содержимое, translateY(-6px) scale(1.01); соседние opacity:.93. Переход фона/рамки 300ms, цвета и движения 280ms, easing cubic-bezier(.22,1,.36,1). Уход возвращает исходное оформление, Access остаётся синей. Не делай единую активную карточку.
При первом появлении 12% секции: заголовок opacity:0→1, translateY(16px→0) за 750ms. Карточки появляются по очереди через 500+i*110ms из opacity:0, translateY(16px) в видимое положение; движение 280ms с тем же easing. Вход однократный. Добавь tabindex:0; Enter/Space переключают у выбранной карточки оформление как при hover, без навигации.
≤960px: секция padding:80px 24px 90px; заголовок margin-bottom:64px; сетка 2 колонки, gap:28px; карточки min-height:500px, padding:60px 28px 42px.
≤640px: секция 64px 20px 72px; 2 колонки, gap:20px; карточки min-height:440px, padding:52px 22px 36px, radius:160px; звезда 44px с отступом 16px, описание 14px/max-width:150px, разделитель 110px.
≤480px: секция 52px 16px 60px; заголовок margin-bottom:48px; одна колонка max-width:320px по центру, gap:20px; карточки min-height:520px, padding:64px 36px 48px, radius:180px; звезда 50px с отступом 20px, описание 15px/max-width:210px, разделитель 130px.
Изолируй CSS/JS. Без IntersectionObserver всё видно. Reduced-motion: без перемещений/задержек, только opacity и цвет.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<style>
/* ─── Block reset ─────────────────────────────────────────── */
.smw-section,
.smw-section * {
box-sizing: border-box;
}
.smw-section input,
.smw-section textarea,
.smw-section select {
font: inherit;
}
/* ─── CSS variables ───────────────────────────────────────── */
.smw-section {
--smw-bg: #D9E1EF;
--smw-blue: #1432F5;
--smw-blue-soft: #8EA0F5;
--smw-white: #FFFFFF;
--smw-font: Arial, sans-serif;
--smw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ─── Section wrapper ─────────────────────────────────────── */
.smw-section {
width: 100%;
background-color: var(--smw-bg);
padding: 110px 20px 120px;
font-family: var(--smw-font);
overflow: hidden;
}
/* ─── Inner container ─────────────────────────────────────── */
.smw-container {
max-width: 1160px;
margin: 0 auto;
}
/* ─── Heading ─────────────────────────────────────────────── */
.smw-heading {
font-family: var(--smw-font);
font-size: clamp(42px, 5vw, 72px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--smw-blue);
max-width: 820px;
margin: 0 0 96px 0;
/* entrance */
opacity: 0;
transform: translateY(16px);
transition: opacity 750ms var(--smw-ease), transform 750ms var(--smw-ease);
}
.smw-heading.smw-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── Cards grid ──────────────────────────────────────────── */
.smw-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: start;
}
/* ─── Individual card ─────────────────────────────────────── */
.smw-card {
position: relative;
width: 100%;
/* target height ~590px; use aspect-ratio as guide, min-height locks it */
min-height: 590px;
border-radius: 200px; /* large dome-capsule */
border: 1.8px solid var(--smw-blue);
background-color: var(--smw-bg);
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 36px 48px;
cursor: pointer;
/* hover transitions */
transition:
background-color 300ms var(--smw-ease),
border-color 300ms var(--smw-ease),
transform 280ms var(--smw-ease);
/* entrance */
opacity: 0;
transform: translateY(16px);
}
.smw-card.smw-visible {
opacity: 1;
transform: translateY(0);
}
/* Hover — fill state */
.smw-card:hover {
background-color: var(--smw-blue);
border-color: var(--smw-blue);
transform: translateY(-6px) scale(1.01);
}
/* Sibling dim on any card hover */
.smw-cards:has(.smw-card:hover) .smw-card:not(:hover) {
opacity: 0.93;
}
/* ─── Star icon ───────────────────────────────────────────── */
.smw-card__star {
width: 56px;
height: 56px;
flex-shrink: 0;
margin-bottom: 22px;
transition: color 280ms var(--smw-ease);
color: var(--smw-blue);
}
.smw-card__star svg {
width: 100%;
height: 100%;
fill: currentColor;
display: block;
}
.smw-card:hover .smw-card__star {
color: var(--smw-white);
}
/* ─── Label ───────────────────────────────────────────────── */
.smw-card__label {
font-family: var(--smw-font);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--smw-blue-soft);
text-align: center;
margin-bottom: 16px;
transition: color 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__label {
color: var(--smw-white);
}
/* ─── Large number ────────────────────────────────────────── */
.smw-card__number {
font-family: var(--smw-font);
font-size: clamp(80px, 8vw, 118px);
font-weight: 400;
line-height: 0.94;
letter-spacing:-0.03em;
color: var(--smw-blue);
text-align: center;
margin-bottom: 28px;
transition: color 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__number {
color: var(--smw-white);
}
/* ─── Divider ─────────────────────────────────────────────── */
.smw-card__divider {
width: 145px;
height: 1px;
background: var(--smw-blue-soft);
border: none;
margin: 0 auto 28px;
flex-shrink: 0;
transition: background 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__divider {
background: var(--smw-white);
}
/* ─── Description ─────────────────────────────────────────── */
.smw-card__desc {
font-family: var(--smw-font);
font-size: 15.5px;
font-weight: 400;
line-height: 1.5;
color: var(--smw-blue);
text-align: center;
max-width: 180px;
transition: color 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__desc {
color: var(--smw-white);
}
/* ─── Reduced-motion overrides ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.smw-heading,
.smw-card {
transition: opacity 500ms linear, background-color 300ms linear,
border-color 300ms linear, color 280ms linear;
transform: none !important;
}
.smw-card:hover {
transform: none !important;
}
}
/* ─── Responsive: tablet 640–960px ───────────────────────── */
@media (max-width: 960px) {
.smw-section {
padding: 80px 24px 90px;
}
.smw-cards {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.smw-card {
min-height: 500px;
padding: 60px 28px 42px;
}
.smw-heading {
margin-bottom: 64px;
}
}
/* ─── Responsive: large mobile 480–640px ─────────────────── */
@media (max-width: 640px) {
.smw-section {
padding: 64px 20px 72px;
}
.smw-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.smw-card {
min-height: 440px;
padding: 52px 22px 36px;
border-radius: 160px;
}
.smw-card__star {
width: 44px;
height: 44px;
margin-bottom: 16px;
}
.smw-card__desc {
font-size: 14px;
max-width: 150px;
}
.smw-card__divider {
width: 110px;
}
}
/* ─── Responsive: small mobile ≤480px ────────────────────── */
@media (max-width: 480px) {
.smw-section {
padding: 52px 16px 60px;
}
.smw-heading {
margin-bottom: 48px;
}
.smw-cards {
grid-template-columns: 1fr;
gap: 20px;
max-width: 320px;
margin: 0 auto;
}
.smw-card {
min-height: 520px;
padding: 64px 36px 48px;
border-radius: 180px;
}
.smw-card__star {
width: 50px;
height: 50px;
margin-bottom: 20px;
}
.smw-card__desc {
font-size: 15px;
max-width: 210px;
}
.smw-card__divider {
width: 130px;
}
}
</style>
<section class="smw-section" aria-label="Key metrics section">
<div class="smw-container">
<!-- Heading -->
<h2 class="smw-heading" id="smw-heading">
A Smarter Way to Show<br>What Matters Most
</h2>
<!-- Cards -->
<div class="smw-cards">
<!-- Card 1 — Performance -->
<article class="smw-card" aria-label="Performance metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Performance</p>
<p class="smw-card__number">65</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">Faster decision-making with clear benefit highlights</p>
</article>
<!-- Card 2 — Reach -->
<article class="smw-card" aria-label="Reach metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Reach</p>
<p class="smw-card__number">97</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">Higher engagement with structured visual content</p>
</article>
<!-- Card 3 — Interaction -->
<article class="smw-card" aria-label="Interaction metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Interaction</p>
<p class="smw-card__number">17</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">User actions completed through optimized journeys</p>
</article>
<!-- Card 4 — Access (shown in active/hover state by default) -->
<article class="smw-card smw-card--active" aria-label="Access metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Access</p>
<p class="smw-card__number">43</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">Always-available information, support, and value</p>
</article>
</div>
</div>
</section>
<style>
/* ─── Card 4 — default active/hover appearance ────────────── */
.smw-card--active {
background-color: var(--smw-blue);
border-color: var(--smw-blue);
}
.smw-card--active .smw-card__star { color: var(--smw-white); }
.smw-card--active .smw-card__label { color: var(--smw-white); }
.smw-card--active .smw-card__number{ color: var(--smw-white); }
.smw-card--active .smw-card__divider{ background: var(--smw-white); }
.smw-card--active .smw-card__desc { color: var(--smw-white); }
</style>
<script>
(function () {
'use strict';
/* ── Entrance animation via IntersectionObserver ─────────── */
var heading = document.getElementById('smw-heading');
var cards = Array.prototype.slice.call(
document.querySelectorAll('.smw-card')
);
var prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
function animateIn() {
/* 1. Heading first */
setTimeout(function () {
heading.classList.add('smw-visible');
}, 0);
/* 2. Cards staggered */
cards.forEach(function (card, i) {
setTimeout(function () {
card.classList.add('smw-visible');
}, prefersReducedMotion ? 0 : 500 + i * 110);
});
}
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateIn();
io.disconnect();
}
});
}, { threshold: 0.12 });
io.observe(heading.closest('.smw-section'));
} else {
/* Fallback: just show everything */
heading.classList.add('smw-visible');
cards.forEach(function (c) { c.classList.add('smw-visible'); });
}
/* ── Keyboard accessibility: treat Enter/Space as hover ──── */
cards.forEach(function (card) {
card.setAttribute('tabindex', '0');
card.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
card.classList.toggle('smw-card--kb-active');
}
});
});
})();
</script>
<style>
/* Keyboard-activated active state (same as hover) */
.smw-card--kb-active {
background-color: var(--smw-blue) !important;
border-color: var(--smw-blue) !important;
transform: translateY(-6px) scale(1.01) !important;
}
.smw-card--kb-active .smw-card__star { color: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__label { color: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__number { color: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__divider{ background: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__desc { color: var(--smw-white) !important; }
</style><style data-vb-overrides="true">.smw-card { height: 5; }
.smw-card__desc { margin: 150; }</style>
/* ─── Block reset ─────────────────────────────────────────── */
.smw-section,
.smw-section * {
box-sizing: border-box;
}
.smw-section input,
.smw-section textarea,
.smw-section select {
font: inherit;
}
/* ─── CSS variables ───────────────────────────────────────── */
.smw-section {
--smw-bg: #D9E1EF;
--smw-blue: #1432F5;
--smw-blue-soft: #8EA0F5;
--smw-white: #FFFFFF;
--smw-font: Arial, sans-serif;
--smw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ─── Section wrapper ─────────────────────────────────────── */
.smw-section {
width: 100%;
background-color: var(--smw-bg);
padding: 110px 20px 120px;
font-family: var(--smw-font);
overflow: hidden;
}
/* ─── Inner container ─────────────────────────────────────── */
.smw-container {
max-width: 1160px;
margin: 0 auto;
}
/* ─── Heading ─────────────────────────────────────────────── */
.smw-heading {
font-family: var(--smw-font);
font-size: clamp(42px, 5vw, 72px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--smw-blue);
max-width: 820px;
margin: 0 0 96px 0;
/* entrance */
opacity: 0;
transform: translateY(16px);
transition: opacity 750ms var(--smw-ease), transform 750ms var(--smw-ease);
}
.smw-heading.smw-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── Cards grid ──────────────────────────────────────────── */
.smw-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: start;
}
/* ─── Individual card ─────────────────────────────────────── */
.smw-card {
position: relative;
width: 100%;
/* target height ~590px; use aspect-ratio as guide, min-height locks it */
min-height: 590px;
border-radius: 200px; /* large dome-capsule */
border: 1.8px solid var(--smw-blue);
background-color: var(--smw-bg);
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 36px 48px;
cursor: pointer;
/* hover transitions */
transition:
background-color 300ms var(--smw-ease),
border-color 300ms var(--smw-ease),
transform 280ms var(--smw-ease);
/* entrance */
opacity: 0;
transform: translateY(16px);
}
.smw-card.smw-visible {
opacity: 1;
transform: translateY(0);
}
/* Hover — fill state */
.smw-card:hover {
background-color: var(--smw-blue);
border-color: var(--smw-blue);
transform: translateY(-6px) scale(1.01);
}
/* Sibling dim on any card hover */
.smw-cards:has(.smw-card:hover) .smw-card:not(:hover) {
opacity: 0.93;
}
/* ─── Star icon ───────────────────────────────────────────── */
.smw-card__star {
width: 56px;
height: 56px;
flex-shrink: 0;
margin-bottom: 22px;
transition: color 280ms var(--smw-ease);
color: var(--smw-blue);
}
.smw-card__star svg {
width: 100%;
height: 100%;
fill: currentColor;
display: block;
}
.smw-card:hover .smw-card__star {
color: var(--smw-white);
}
/* ─── Label ───────────────────────────────────────────────── */
.smw-card__label {
font-family: var(--smw-font);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--smw-blue-soft);
text-align: center;
margin-bottom: 16px;
transition: color 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__label {
color: var(--smw-white);
}
/* ─── Large number ────────────────────────────────────────── */
.smw-card__number {
font-family: var(--smw-font);
font-size: clamp(80px, 8vw, 118px);
font-weight: 400;
line-height: 0.94;
letter-spacing:-0.03em;
color: var(--smw-blue);
text-align: center;
margin-bottom: 28px;
transition: color 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__number {
color: var(--smw-white);
}
/* ─── Divider ─────────────────────────────────────────────── */
.smw-card__divider {
width: 145px;
height: 1px;
background: var(--smw-blue-soft);
border: none;
margin: 0 auto 28px;
flex-shrink: 0;
transition: background 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__divider {
background: var(--smw-white);
}
/* ─── Description ─────────────────────────────────────────── */
.smw-card__desc {
font-family: var(--smw-font);
font-size: 15.5px;
font-weight: 400;
line-height: 1.5;
color: var(--smw-blue);
text-align: center;
max-width: 180px;
transition: color 280ms var(--smw-ease);
}
.smw-card:hover .smw-card__desc {
color: var(--smw-white);
}
/* ─── Reduced-motion overrides ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.smw-heading,
.smw-card {
transition: opacity 500ms linear, background-color 300ms linear,
border-color 300ms linear, color 280ms linear;
transform: none !important;
}
.smw-card:hover {
transform: none !important;
}
}
/* ─── Responsive: tablet 640–960px ───────────────────────── */
@media (max-width: 960px) {
.smw-section {
padding: 80px 24px 90px;
}
.smw-cards {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.smw-card {
min-height: 500px;
padding: 60px 28px 42px;
}
.smw-heading {
margin-bottom: 64px;
}
}
/* ─── Responsive: large mobile 480–640px ─────────────────── */
@media (max-width: 640px) {
.smw-section {
padding: 64px 20px 72px;
}
.smw-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.smw-card {
min-height: 440px;
padding: 52px 22px 36px;
border-radius: 160px;
}
.smw-card__star {
width: 44px;
height: 44px;
margin-bottom: 16px;
}
.smw-card__desc {
font-size: 14px;
max-width: 150px;
}
.smw-card__divider {
width: 110px;
}
}
/* ─── Responsive: small mobile ≤480px ────────────────────── */
@media (max-width: 480px) {
.smw-section {
padding: 52px 16px 60px;
}
.smw-heading {
margin-bottom: 48px;
}
.smw-cards {
grid-template-columns: 1fr;
gap: 20px;
max-width: 320px;
margin: 0 auto;
}
.smw-card {
min-height: 520px;
padding: 64px 36px 48px;
border-radius: 180px;
}
.smw-card__star {
width: 50px;
height: 50px;
margin-bottom: 20px;
}
.smw-card__desc {
font-size: 15px;
max-width: 210px;
}
.smw-card__divider {
width: 130px;
}
}
</style>
<section class="smw-section" aria-label="Key metrics section">
<div class="smw-container">
<!-- Heading -->
<h2 class="smw-heading" id="smw-heading">
A Smarter Way to Show<br>What Matters Most
</h2>
<!-- Cards -->
<div class="smw-cards">
<!-- Card 1 — Performance -->
<article class="smw-card" aria-label="Performance metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Performance</p>
<p class="smw-card__number">65</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">Faster decision-making with clear benefit highlights</p>
</article>
<!-- Card 2 — Reach -->
<article class="smw-card" aria-label="Reach metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Reach</p>
<p class="smw-card__number">97</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">Higher engagement with structured visual content</p>
</article>
<!-- Card 3 — Interaction -->
<article class="smw-card" aria-label="Interaction metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Interaction</p>
<p class="smw-card__number">17</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">User actions completed through optimized journeys</p>
</article>
<!-- Card 4 — Access (shown in active/hover state by default) -->
<article class="smw-card smw-card--active" aria-label="Access metric">
<div class="smw-card__star" aria-hidden="true">
<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">
<polygon points="28,4 34.5,21 53,21 38.5,32.5 44,50 28,39 12,50 17.5,32.5 3,21 21.5,21"></polygon>
</svg>
</div>
<p class="smw-card__label">Access</p>
<p class="smw-card__number">43</p>
<hr class="smw-card__divider">
<p class="smw-card__desc">Always-available information, support, and value</p>
</article>
</div>
</div>
</section>
<style>
/* ─── Card 4 — default active/hover appearance ────────────── */
.smw-card--active {
background-color: var(--smw-blue);
border-color: var(--smw-blue);
}
.smw-card--active .smw-card__star { color: var(--smw-white); }
.smw-card--active .smw-card__label { color: var(--smw-white); }
.smw-card--active .smw-card__number{ color: var(--smw-white); }
.smw-card--active .smw-card__divider{ background: var(--smw-white); }
.smw-card--active .smw-card__desc { color: var(--smw-white); }
</style>
<script>
(function () {
'use strict';
/* ── Entrance animation via IntersectionObserver ─────────── */
var heading = document.getElementById('smw-heading');
var cards = Array.prototype.slice.call(
document.querySelectorAll('.smw-card')
);
var prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches;
function animateIn() {
/* 1. Heading first */
setTimeout(function () {
heading.classList.add('smw-visible');
}, 0);
/* 2. Cards staggered */
cards.forEach(function (card, i) {
setTimeout(function () {
card.classList.add('smw-visible');
}, prefersReducedMotion ? 0 : 500 + i * 110);
});
}
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateIn();
io.disconnect();
}
});
}, { threshold: 0.12 });
io.observe(heading.closest('.smw-section'));
} else {
/* Fallback: just show everything */
heading.classList.add('smw-visible');
cards.forEach(function (c) { c.classList.add('smw-visible'); });
}
/* ── Keyboard accessibility: treat Enter/Space as hover ──── */
cards.forEach(function (card) {
card.setAttribute('tabindex', '0');
card.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
card.classList.toggle('smw-card--kb-active');
}
});
});
})();
</script>
<style>
/* Keyboard-activated active state (same as hover) */
.smw-card--kb-active {
background-color: var(--smw-blue) !important;
border-color: var(--smw-blue) !important;
transform: translateY(-6px) scale(1.01) !important;
}
.smw-card--kb-active .smw-card__star { color: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__label { color: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__number { color: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__divider{ background: var(--smw-white) !important; }
.smw-card--kb-active .smw-card__desc { color: var(--smw-white) !important; }
</style><style data-vb-overrides="true">.smw-card { height: 5; }
.smw-card__desc { margin: 150; }</style>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
