Announce 🔗

Имиджевый блок с двумя колонками текста и картинкой

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

Исходный код для примера выше:

<Announce image="/img/graduates.jpg" vector="/img/text-vector.svg">
    <Heading size={1} slot="first" margin={{ top: 0 }}>Магистратура предоставляет возможности</Heading>
    <svelte:fragment slot="second">
        <Text>В рейтинге «100 лучших российских вузов» по версии Forbes УрФУ занял 4-ое место, обогнав многие столичные вузы — это лучший результат среди нестоличных вузов России.</Text>
        <br />
        <Divider />
        <br />
        <Text opacity={0.4}>Повышает шансы на трудоустройство и увеличение заработной платы</Text>
        <Text opacity={0.4}>Получать образование, совмещая с работой или стажировкой</Text>
        <Text opacity={0.4}>Построить индивидуальную траекторию обучения</Text>
        <Text opacity={0.4}>Получать повышенные стипендии</Text>
        <Text opacity={0.4}>Заниматься наукой</Text>
        <br />
        <Button>Поступить</Button>
    </svelte:fragment>
</Announce>

Параметры:

imagePosition

enum

Положение изображения (которое задаётся через параметр image) в контейнере
Поддерживаемые значения: left, right
Значение по умолчанию: right

image

string

Ссылка на изображение (обычно растровое), отображаемое в левой или правой колонке (в зависимости от значения параметра imagePosition)

vector

string

Ссылка на изображение (обычно векторное), отображаемое в левом нижнем углу компонента (если imagePosition = right)

color

string

Цвет заднего фона
Значение по умолчанию: var(--blue)

textColor

string

Цвет текста
Значение по умолчанию: white

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

Аналог стандартного атрибута class

Слоты:

first

Контент первой текстовой колонки

second

Контент второй текстовой колонки