generated from gitea_admin/default
74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
<template>
|
||
<div class="newslettercta">
|
||
<PageSection tone="brandreverse" :padded="false" content-size="default" padb="xs">
|
||
<SectionTitle as="h1" tone="invert" pad="xs">
|
||
NEWSLETTER
|
||
</SectionTitle>
|
||
|
||
<SectionContent pad="xs" class="newslettercta__content">
|
||
<div class="newslettercta__content_text">
|
||
<DsText as="p" tone="invert">
|
||
Recevez l'actualité des concerts de l'Orchestre national d'Île-de-France par infolettre !
|
||
</DsText>
|
||
</div>
|
||
<div class="newslettercta__button">
|
||
<DsButton
|
||
href="https://eb686efa.sibforms.com/serve/MUIFAP2a1WdNgM9e0cv4B5b_QwHC_QzCXtnwSoUEWllWVV1Kxq7vbzbRVWoIagXviq-jYQHuKv0-AN8cmEggeJnUds8C4VumwkC0dCTD0kQPVZ8nXWhXG5ABFo4EEys6OY-C_qQW4iUnWeq8cFA8X3dRaLj_q410BX_yvp6E8o5eOklPWsKkZnmXI1Qc31WqegQhTTkp_Z0Jhbg="
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
textColor="invert"
|
||
borderColor="invert"
|
||
>
|
||
Restez informé
|
||
</DsButton>
|
||
</div>
|
||
|
||
</SectionContent>
|
||
</PageSection>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DsText from '@root/design-system/primitives/DsText.vue'
|
||
import DsButton from '@root/design-system/primitives/DsButton.vue'
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.newslettercta {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.newslettercta__content {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
|
||
align-items: center;
|
||
row-gap: 15px;
|
||
column-gap: 15px;
|
||
padding-right: 10px;
|
||
|
||
.newslettercta__content_text {
|
||
grid-column: 1;
|
||
}
|
||
.newslettercta__button {
|
||
grid-column: 1;
|
||
justify-self: start;
|
||
}
|
||
}
|
||
@media (max-width: 300px) {
|
||
.newslettercta__content {
|
||
padding-left: calc(var(--section-title-pl, var(--sp-45)) - 20px);
|
||
}
|
||
}
|
||
@media (min-width: 500px) {
|
||
.newslettercta__content {
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||
|
||
.newslettercta__button {
|
||
grid-column: 2;
|
||
}
|
||
}
|
||
}
|
||
</style>
|