<style media="screen">
:root {
--m-info-box-border-color: #c27fec;
}
</style>
<div class="m-info-box m-info-box--basic background-peacock-light">
<p>Sed malesuada quis risus eget malesuada. <strong>Vivamus posuere</strong>, erat sit amet vehicula suscipit, nisi arcu euismod sem, id tempus justo ligula sit amet turpis. <a href="#">Sed faucibus purus</a> sed neque pulvinar, ac faucibus leo tristique.</p>
</div>
<style media="screen">
:root {
--m-info-box-border-color: #c27fec;
}
</style>
<div class="m-info-box{{#if modifiers}} {{getmodifiers modifiers "m-info-box"}}{{/if}}{{#if additional_classes}} {{additional_classes}}{{/if}}">
{{{text}}}
</div>
{
"text": "<p>Sed malesuada quis risus eget malesuada. <strong>Vivamus posuere</strong>, erat sit amet vehicula suscipit, nisi arcu euismod sem, id tempus justo ligula sit amet turpis. <a href=\"#\">Sed faucibus purus</a> sed neque pulvinar, ac faucibus leo tristique.</p>",
"modifiers": [
"basic"
],
"additional_classes": "background-peacock-light"
}
@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/typography/typography';
@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;
@include mixin.molecule(info-box) {
margin: func.rhythm(4) 0;
padding: func.rhythm(4);
border-top: func.to_rem(4px) solid colors.$color-lemon;
border-radius: var.$border-radius;
background-color: var(--snow-color);
> p,
> ul,
> ol {
&:last-child {
margin-bottom: 0;
}
}
@include breakpoint.bp-up(md) {
padding-right: func.rhythm(5.5);
padding-left: func.rhythm(5.5);
}
@include bem.m(big) {
border-color: colors.$color-jade;
p {
@extend %preamble;
}
}
@include bem.m(basic) {
margin-top: 0;
padding: func.rhythm(2);
border-top: 0;
border-color: none;
@include breakpoint.bp-up(md) {
padding: func.rhythm(4);
}
@include breakpoint.bp-up(lg) {
padding-top: func.rhythm(6);
padding-right: func.rhythm(8);
padding-bottom: func.rhythm(6);
padding-left: func.rhythm(8);
}
}
@include bem.m(custom-border) {
border-color: var(--m-info-box-border-color);
}
}
No notes defined.