UniversalSection

Props

type TItem = {
	icon: string;
	text: string;
}

type TImage = {
	url: string;
	title?: string;
	description?: string;
}

interface Props {
	section: {
		id?: string;
		sectionClass?: string;
		items?: TItem[];
		suptitle?: string;
		title?: string;
		text?: string;
		images?: TImage[];
		button?: string;
	}
}

Использование #1

---
import UniversalSection from '@/blocks/rich-content/RichContentBlock.astro';
const sectionOne = {
    id: "description",
    sectionClass: "!bg-white",
    suptitle: "Красавец",
    title: "KNEWSTAR 001",
    text: "<p>Купе-кроссовер 001 – это первая модель в линейке бренда KNEWSTAR с запоминающимся дизайном, премиальными материалами отделки и современными технологиями.</p>",
    items: [
        {icon: "mdi:engine-outline", text: "Мощность 200/238 л.с."},
        {icon: "mdi:speedometer", text: "Разгон 0-100 км/ч - 7,4 / 6,9 с"},
        {icon: "mdi:gas-station-outline", text: "Ср. расход топлива - 8,1 л / 100 км"}
    ],
    images: [
        {url: "https://cdn.alexsab.ru/b/geely/img/models/001/sections/1.webp"}
    ]
};
---

<UniversalSection section={sectionOne} />

Использование #2

---
import UniversalSection from '@/blocks/rich-content/RichContentBlock.astro';
const sectionTwo = {
    id: "design",
    sectionClass: "",
    suptitle: "Красавец",
    title: "Дизайн и архитектура",
    images: [
        {url: "https://cdn.alexsab.ru/b/geely/img/models/001/sections/design/1.webp", title: "Экстерьер", description: "Выразительный силуэт кросс-купе KNEWSTAR 001 заметен в потоке с первого взгляда. Спортивный характер автомобиля подчёркивают строгая решётка радиатора, лаконичный передний бампер и сдвоенные выхлопные патрубки в заднем бампере."},
        {url: "https://cdn.alexsab.ru/b/geely/img/models/001/sections/design/2.webp", title: "Интерьер", description: "Выразительный силуэт кросс-купе KNEWSTAR 001 заметен в потоке с первого взгляда. Спортивный характер автомобиля подчёркивают строгая решётка радиатора, лаконичный передний бампер и сдвоенные выхлопные патрубки в заднем бампере."},
        {url: "https://cdn.alexsab.ru/b/geely/img/models/001/sections/design/3.webp", title: "Архитектура", description: "Выразительный силуэт кросс-купе KNEWSTAR 001 заметен в потоке с первого взгляда. Спортивный характер автомобиля подчёркивают строгая решётка радиатора, лаконичный передний бампер и сдвоенные выхлопные патрубки в заднем бампере."},
    ],
	button: "<a href='/guide/demo/universal-section/' class='btn'>Кнопка</a>"
};
---

<UniversalSection section={sectionTwo} />

Использование #3

Если задать id: "more"

---
import UniversalSection from '@/blocks/rich-content/RichContentBlock.astro';
const sectionThree = {
    id: "more",
	text: '<p><sup>*</sup> Возможно использование комбинации натуральной и искусственной кожи для отделки отдельных элементов.</p> <p><sup>**</sup> Сервисы мобильного приложения Kia Connect. Набор доступных сервисов зависит от модели, комплектации автомобиля и мультимедийной системы. На данный момент сервисы Kia Connect доступны только на территории РФ.</p><p>Предоставление функционала сервисов возможно и зависит от наличия и/или мощности сигнала связи, предоставляемого соответствующим оператором связи. Ограниченность функционала телематических сервисов Автомобиля в связи с отсутствием сигнала и/или достаточности мощности сигнала связи не является недостатком Автомобиля и не может являться основанием для предъявления соответствующих требований и претензий. Автомобиль оборудован функцией "Дистанционная система кругового обзора", обеспечивающей возможность дистанционной активации камер системы кругового обзора, когда автомобиль находится на парковке. Kia Connect имеет функцию Дистанционной активации камер системы кругового обзора Автомобиля и сохранения таких фотографий на мобильном устройстве лица, пользующегося Автомобилем. Согласно статье 152.1 ГК РФ обнародование и дальнейшее использование изображения гражданина (в том числе его фотографии, а также видеозаписи или произведения изобразительного искусства, в которых он изображен) допускаются только с согласия этого гражданина за исключением случаев, установленных указанной статьей. Обращаем внимание, что изображение является персональными данными (в случаях, установленных законодательством – биометрическими персональными данными). В случае нарушения требований и порядка обработки персональных данных Клиент (или именуем так, как назван в определенном документе) несет ответственность в соответствии с законодательством о персональных данных, ГК РФ и УК РФ.</p><p>Сведения о ценах на продукцию бренда Kia, содержащиеся на сайте, носят исключительно информационный характер. Указанные цены могут отличаться от действительных цен дилеров Kia.</p><p>Для получения подробной информации об актуальных ценах на продукцию Kia и наличии автомобилей обращайтесь к Kia в Самаре. Приобретение любой продукции бренда Kia осуществляется в соответствии с условиями индивидуального договора купли-продажи. Представленное изображение автомобиля может отличаться от реализуемого. Не является публичной офертой.</p><p>Данные по времени разгона получены в эталонных условиях с применением специального измерительного оборудования, при использовании эталонного топлива. Реальное время разгона может отличаться в силу воздействия различных объективных и субъективных факторов влажности, давления и температуры окружающего воздуха, фракционного состава используемого топлива, рельефа местности, характеристик дорожного покрытия, направления и скорости ветра, атмосферных осадков, давления в шинах а также их размерности, марки и модели, массы перевозимого груза (включая водителя и пассажиров) и навыков вождения. Из-за различий в комплектациях автомобилей и требованиях на разных рынках, характеристики моделей могут отличаться от указанных выше. Компания Kia оставляет за собой право на внесение изменений в конструкцию и комплектацию автомобилей без предварительного уведомления.</p><p>Наценка за окраску кузова в цвете металлик указана относительно цены автомобиля с базовым цветом.</p><p>Classic - Классик, Comfort - Комфорт, Luxe - Люкс, Prestige - Престиж, Style - Стайл, GT Line - Джити Лайн, GT Line+ - Джити Лайн Плюс.</p><p>GDI (Gasoline Direct Injection) - двигатель с непосредственным впрыском топлива.</p><p>MPI (Multi Point Injection) - бензиновый двигатель с распределенным впрыском топлива.</p><p>Auto - Авто, TFT (Thin Film Transistor) - Тиэфти, Engine (Start-Stop) - Двигатель (Старт-Стоп), LCD (Liquid Crystal Display) - Жидкокристаллический дисплей, Supervision - Супервижн, USB (Universal Serial Bus) - интерфейс для подключения, AUX (auxiliary) - интерфейс для подключения, SD (Secure Digital) - формат карт памяти, Bluetooth (Блютус) - спецификация беспроводных персональных сетей, Apple Carplay - Эппл Карплей, Android Auto - Андройд Авто, Smart Key - Смарт Кей, AHSS(Advanced-high-strength steel) - прогрессивная высокопрочная сталь, ABS (Anti-lock braking system) - Антиблокировочная система торможения, EPB (Electromechanical Parking Brake) - Электрический стояночный тормоз, Auto Hold - система автоматического удержания.</p><p>Технические характеристики уточняйте у наших менеджеров.</p>'
};
---

<UniversalSection section={sectionThree} />

TItem

TImage

section