<div class="o-features-box background-snow ">
<ul class="o-features-box__list">
<li class="o-features-box__list__item">
<div class="o-features-box__list__icon"><svg class="icon u-icon">
<use xlink:href="#icon-capacity"></use>
</svg>
</div>
<div>Max 40 personer</div>
</li>
<li class="o-features-box__list__item">
<div class="o-features-box__list__icon"><svg class="icon u-icon">
<use xlink:href="#icon-display"></use>
</svg>
</div>
<div>Bildskärm med anslutning via HDMI eller Mini Display Port</div>
</li>
<li class="o-features-box__list__item">
<div class="o-features-box__list__icon"><svg class="icon u-icon">
<use xlink:href="#icon-headset"></use>
</svg>
</div>
<div>Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam</div>
</li>
<li class="o-features-box__list__item">
<div class="o-features-box__list__icon"><svg class="icon u-icon">
<use xlink:href="#icon-headset"></use>
</svg>
</div>
<div>5 headsets och 4 handmikrofoner</div>
</li>
<li class="o-features-box__list__item">
<div class="o-features-box__list__icon"><svg class="icon u-icon">
<use xlink:href="#icon-streaming"></use>
</svg>
</div>
<div>Riggat för livesändning</div>
</li>
<li class="o-features-box__list__item">
<div class="o-features-box__list__icon"><svg class="icon u-icon">
<use xlink:href="#icon-accessibility"></use>
</svg>
</div>
<div>Rullstolsanpassad lokal med ramp</div>
</li>
</ul>
<div class="row u-m-t-4">
<div class="grid-18">
<a class="a-button a-button--icon a-button--lemon a-button--icon-left o-features-box__button">
<span class="a-button__text">Skapa event</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-plus"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="o-features-box{{#if modifier}} o-features-box--{{modifier}}{{/if}} background-{{color}} {{height}} {{#if additional_classes}} {{additional_classes}}{{/if}}">
{{#if heading}}
<h2 class="{{heading_classes}}">{{heading}}</h2>
{{/if}}
<ul class="o-features-box__list">
{{#each list_items}}
<li class="o-features-box__list__item">
{{#if icon}}
<div class="o-features-box__list__icon">{{> @icon id=this.icon additional_classes="u-icon"}}</div>
{{/if}}
<div>{{{li_text}}}</div>
</li>
{{/each}}
</ul>
{{#if button}}
<div class="row u-m-t-4">
<div class="grid-18">
{{> @button el="a" text=this.button_text modifiers=this.button_modifiers icon=this.button_icon additional_classes=""}}
</div>
</div>
{{/if}}
</div>
{
"color": "snow",
"padding": "u-p-x-4 u-p-t-3 u-p-b-4",
"height": "",
"heading": false,
"heading_classes": false,
"button": true,
"button_icon": "plus",
"button_text": "Skapa event",
"additional_classes": false,
"button_modifiers": "icon, lemon, icon-left o-features-box__button",
"list_items": [
{
"li_text": "Max 40 personer",
"icon": "capacity"
},
{
"li_text": "Bildskärm med anslutning via HDMI eller Mini Display Port",
"icon": "display"
},
{
"li_text": "Lång text för att testa radbryt och så. Sunt dolores aliquam non repellat sed nihil doloribus placeat. Autem debitis ut veniam",
"icon": "headset"
},
{
"li_text": "5 headsets och 4 handmikrofoner",
"icon": "headset"
},
{
"li_text": "Riggat för livesändning",
"icon": "streaming"
},
{
"li_text": "Rullstolsanpassad lokal med ramp",
"icon": "accessibility"
}
]
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/extends';
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;
@include mixin.organism(features-box) {
padding: func.rhythm(2) func.rhythm(3) func.rhythm(3) func.rhythm(3);
border-radius: var.$border-radius;
@include breakpoint.bp-up(lg) {
padding: func.rhythm(3) func.rhythm(4) func.rhythm(4) func.rhythm(4);
}
@include bem.m(large-text) {
@include breakpoint.bp-up(lg) {
padding: func.rhythm(4) func.rhythm(6) func.rhythm(6) func.rhythm(6);
}
}
@include bem.e(list) {
margin: 0;
padding: 0;
list-style: none;
@include bem.e(item) {
display: flex;
margin-bottom: func.rhythm(2);
a {
@extend %link-styles;
}
}
@include bem.e(icon) {
display: flex;
margin-right: func.rhythm(2);
> svg {
margin-top: func.rhythm(0.5);
}
@include breakpoint.bp-up(lg) {
margin-right: func.rhythm(4);
}
}
}
@include bem.e(button) {
display: flex;
flex-grow: 1;
justify-content: center;
}
}
Use variant with the full height utility class .u-height-full if
the features box is used side by side in a grid next to an image, so
they will be the same height no matter the content.