Add number block based on one in the docs

This commit is contained in:
Daniel N
2022-08-23 19:18:17 +02:00
parent b6004c359f
commit 38fd1b7710
@@ -0,0 +1,51 @@
<template>
<div class="number-block">
<div v-for="{ value, text } in items" class="number-block-item">
<div class="number-block-number">{{ value }}</div>
<div>{{ text }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'NumberBlock',
props: {
items: {
type: Array,
default: []
}
}
}
</script>
<style lang="stylus">
.number-block-item {
background-color: #cbe9e9;
margin-top: 1em;
padding: 1em;
text-align: center;
}
.number-block-number {
color: #296161;
font-size: 3em;
font-weight: 700;
}
@media (min-width: $MQNarrow) {
.number-block {
display: flex;
margin-top: 1em;
}
.number-block-item {
flex: 1 1 0;
margin-right: 1em;
}
.number-block-item:last-child {
margin-right: 0;
}
}
</style>