<div class="c-boxcta u-flex u-column u-row@sm u-justify-between u-my-large u-p-small">
<div class="u-flex u-items-center">
<img class="c-boxcta__img u-size-64 u-m-none" src="https://dni-cdn.goalshouter.com/static-dni-production/uploads/team_logo/e17d647a-af6e-4359-aff6-7fb2c8bacd79" alt="">
<div class="u-ml-base">
<h2 class="u-title-05 u-m-none">Us Livorno</h2>
<span class="u-label-07 u-block">Scarica l'app per aggiornamenti e classifiche</span>
</div>
</div>
<div class="u-my-small">
<button class="c-btn c-btn--primary u-relative u-flex u-cursor-pointer u-items-center u-nowrap
c-btn--small u-label-05
" true>
APP GRATIS
</button>
</div>
</div>
<div class="c-boxcta u-flex u-column u-row@sm u-justify-between u-my-large u-p-small">
<div class="u-flex u-items-center">
<img class="c-boxcta__img u-size-64 u-m-none" src="{{logo}}" alt="">
<div class="u-ml-base">
<h2 class="u-title-05 u-m-none">{{name}}</h2>
<span class="u-label-07 u-block">{{claim}}</span>
</div>
</div>
<div class="u-my-small">
{% render "@button--primary", {label:'APP GRATIS', size: 'small'}, true %}
</div>
</div>
{
"logo": "https://dni-cdn.goalshouter.com/static-dni-production/uploads/team_logo/e17d647a-af6e-4359-aff6-7fb2c8bacd79",
"name": "Us Livorno",
"claim": "Scarica l'app per aggiornamenti e classifiche"
}
// Name: Boxcta
// Description: Shows a call to action box
//
// Component: `c-boxcta`
//
// Dependencies: `settings/v7/colors.tokens`
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
.c-boxcta {
border: 1px solid $ui-04;
img {
.c-entry & {
margin: 0;
}
}
}
Boxcta component is used to display a call to action box.
In order to display a default boxcta use following syntax:
{% render "@boxcta" %}