<div class="supt-card-contact">
<h3>Argentina</h3>
<a href="mailto:argentina.pressrelations@verisure.com">
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 1.5H12C12.6904 1.5 13.25 2.05964 13.25 2.75V9.25C13.25 9.94036 12.6904 10.5 12 10.5H2C1.30964 10.5 0.75 9.94036 0.75 9.25V2.75C0.75 2.05964 1.30964 1.5 2 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M1.3125 2.0625L5.70812 5.78187C6.45381 6.41284 7.54619 6.41284 8.29188 5.78187L12.6875 2.0625" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span>argentina.pressrelations@verisure.com</span>
</a>
</div>
No notes defined.
<div class="supt-card-contact">
<h3>{{ title }}</h3>
<a href="mailto:{{ email }}">
{% include "02-icons/email-icon.twig" %}
<span>{{ email }}</span>
</a>
</div>
{
"title": "Argentina",
"email": "argentina.pressrelations@verisure.com"
}
.supt-card-contact {
@extend %t-body-s;
@mixin clamp padding-block, $spacing-5, $spacing-6, $breakpoint-xs, $breakpoint-xl;
@mixin clamp gap, $spacing-1-5, $spacing-2, $breakpoint-xs, $breakpoint-xl;
padding-inline: $spacing-3;
border-top: 1px solid $color-grey-2;
border-bottom: 1px solid $color-grey-2;
display: flex;
flex-direction: column;
& + & {
border-top: none;
}
h3 {
@extend %t-body-sm;
margin: 0;
font-weight: $font-weight-medium;
}
a {
@extend %t-body-s;
font-weight: $font-weight-medium;
@mixin clamp gap, $spacing-1-5, $spacing-2, $breakpoint-xs, $breakpoint-xl;
display: flex;
align-items: center;
gap: $spacing-2;
color: $color-main;
svg {
flex-shrink: 0;
width: 14px;
height: 14px;
}
span {
@extend %link-underline;
background-position: 0 calc(100% - 3px);
&:hover,
&:focus-visible {
background-position: 100% calc(100% - 3px);
}
}
&:focus {
outline: none;
}
&:focus-visible {
color: $color-medium;
}
}
}