<div class="dashboard-card">
<a href="#" class="dashboard-card__link">
<div class="dashboard-card__inner">
<div class="dashboard-card__icon-wrapper">
<svg class="icon dashboard-card__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-balance"></use>
</svg>
</div>
<div class="dashboard-card__content">
<div class="dashboard-card__title">
Arvete saldo
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
1 000 000 €
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
<svg class="icon dashboard-card__button" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
{% set BEM -%}
dashboard-card
{%- if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{% endset %}
<div class="{{ BEM }}">
<a href="{{ data.link }}" class="dashboard-card__link">
<div class="dashboard-card__inner">
{% if data.icon %}
<div class="dashboard-card__icon-wrapper">
{% include '@icon' with {
name: data.icon,
modifier: '',
class: 'dashboard-card__icon'}
%}
</div>
{% endif %}
<div class="dashboard-card__content">
<div class="dashboard-card__title">
{{ data.title }}
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
{{ data.subtitle }}
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
{% include '@icon' with { name: 'arrow-right',
class: 'dashboard-card__button',
} %}
</div>
</div>
</div>
</div>
</a>
</div>
{
"language": "en-US",
"data": {
"image": true,
"title": "Arvete saldo",
"subtitle": "1 000 000 €",
"icon": "dashboard-balance",
"link": "#"
}
}
.dashboard-card {
position: relative;
background-color: $L-background;
border-radius: $border-radius-base;
transition-duration: $transition-duration;
transition: transform $transition-duration $transition-easing; // stylelint-disable-line
&:hover {
box-shadow: $elevation-02;
transform: translateY(-6px);
}
}
.dashboard-card__inner {
width: 100%;
padding: 16px;
}
.dashboard-card__icon-wrapper {
background-color: $L-background-light;
display: flex;
align-items: center;
justify-content: center;
border-radius: $border-radius-round;
margin-bottom: 16px;
color: $L-text-strong;
width: 48px;
height: 48px;
@include bp(md-min) {
width: 64px;
height: 64px;
};
}
.dashboard-card__icon {
flex: 0 0 24px;
font-size: 24px;
@include bp(md-min) {
flex: 0 0 32px;
font-size: 32px;
}
}
.dashboard-card__content {
display: flex;
flex-direction: column;
}
.dashboard-card__title {
color: $L-text-black;
font-size: $font-size-base;
letter-spacing: $letter-spacing-50;
margin-bottom: 8px;
@include bp(md-min) {
margin-bottom: 16px;
}
}
.dashboard-card__subtitle {
font-size: $font-size-extra-large-xs;
font-weight: $font-weight-bold;
line-height: 20px;
@include bp(md-min) {
font-size: $font-size-extra-large;
line-height: $line-height-h3-xs;
}
.dashboard-card--deadline & {
color: $L-error-icon-hover;
}
}
.dashboard-card__link {
text-decoration: none;
display: block;
width: 100%;
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.dashboard-card__button {
display: flex;
align-items: center;
border-radius: $border-radius-round;
height: 48px;
width: 48px;
padding: 12px;
background: none;
color: $L-text-strong;
.dashboard-card:hover & {
background-color: $L-background-hover;
}
}
import './dashboard-card.scss';
<div class="dashboard-card dashboard-card--deadline">
<a href="#" class="dashboard-card__link">
<div class="dashboard-card__inner">
<div class="dashboard-card__icon-wrapper">
<svg class="icon dashboard-card__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-calender"></use>
</svg>
</div>
<div class="dashboard-card__content">
<div class="dashboard-card__title">
Tähtaja ületanud arved
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
1176.48 €
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
<svg class="icon dashboard-card--deadline dashboard-card__button" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</a>
</div>
{% set BEM -%}
dashboard-card
{%- if modifier %} {{ modifier }}{% endif %}
{%- if class %} {{ class }}{% endif %}
{% endset %}
<div class="{{ BEM }}">
<a href="{{ data.link }}" class="dashboard-card__link">
<div class="dashboard-card__inner">
{% if data.icon %}
<div class="dashboard-card__icon-wrapper">
{% include '@icon' with {
name: data.icon,
modifier: '',
class: 'dashboard-card__icon'}
%}
</div>
{% endif %}
<div class="dashboard-card__content">
<div class="dashboard-card__title">
{{ data.title }}
</div>
<div class="grid grid--no-wrap grid--middle-xs dashboard-card__subtitle">
<div class="grid__col grid__col--max-xs ">
{{ data.subtitle }}
</div>
<div class="grid__col grid__col--min-xs dashboard-card__button-wrapper">
{% include '@icon' with { name: 'arrow-right',
class: 'dashboard-card__button',
} %}
</div>
</div>
</div>
</div>
</a>
</div>
{
"language": "en-US",
"data": {
"image": true,
"title": "Tähtaja ületanud arved",
"subtitle": "1176.48 €",
"icon": "dashboard-calender",
"link": "#"
},
"modifier": "dashboard-card--deadline"
}
.dashboard-card {
position: relative;
background-color: $L-background;
border-radius: $border-radius-base;
transition-duration: $transition-duration;
transition: transform $transition-duration $transition-easing; // stylelint-disable-line
&:hover {
box-shadow: $elevation-02;
transform: translateY(-6px);
}
}
.dashboard-card__inner {
width: 100%;
padding: 16px;
}
.dashboard-card__icon-wrapper {
background-color: $L-background-light;
display: flex;
align-items: center;
justify-content: center;
border-radius: $border-radius-round;
margin-bottom: 16px;
color: $L-text-strong;
width: 48px;
height: 48px;
@include bp(md-min) {
width: 64px;
height: 64px;
};
}
.dashboard-card__icon {
flex: 0 0 24px;
font-size: 24px;
@include bp(md-min) {
flex: 0 0 32px;
font-size: 32px;
}
}
.dashboard-card__content {
display: flex;
flex-direction: column;
}
.dashboard-card__title {
color: $L-text-black;
font-size: $font-size-base;
letter-spacing: $letter-spacing-50;
margin-bottom: 8px;
@include bp(md-min) {
margin-bottom: 16px;
}
}
.dashboard-card__subtitle {
font-size: $font-size-extra-large-xs;
font-weight: $font-weight-bold;
line-height: 20px;
@include bp(md-min) {
font-size: $font-size-extra-large;
line-height: $line-height-h3-xs;
}
.dashboard-card--deadline & {
color: $L-error-icon-hover;
}
}
.dashboard-card__link {
text-decoration: none;
display: block;
width: 100%;
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.dashboard-card__button {
display: flex;
align-items: center;
border-radius: $border-radius-round;
height: 48px;
width: 48px;
padding: 12px;
background: none;
color: $L-text-strong;
.dashboard-card:hover & {
background-color: $L-background-hover;
}
}
import './dashboard-card.scss';