<style media="screen">
    :root {
        --m-info-box-border-color: #c27fec;
    }
</style>
<div class="m-info-box m-info-box--big">
    <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": [
    "big"
  ],
  "additional_classes": false
}
  • Content:
    @charset 'UTF-8';
    
    @include molecule(info-box) {
    	margin: rhythm(4) 0;
    	padding: rhythm(4);
    	border-top: rem(4px) solid $color-lemon;
    	border-radius: $border-radius;
    	background-color: var(--snow-color);
    
    	> p,
    	> ul,
    	> ol {
    		&:last-child {
    			margin-bottom: 0;
    		}
    	}
    
    	@include bp-up(md) {
    		padding-right: rhythm(5.5);
    		padding-left: rhythm(5.5);
    	}
    
    	@include m(big) {
    		border-color: $color-jade;
    
    		p {
    			@extend %preamble;
    		}
    	}
    
    	@include m(basic) {
    		margin-top: 0;
    		padding: rhythm(2);
    		border-top: 0;
    		border-color: none;
    
    		@include bp-up(md) {
    			padding: rhythm(4);
    		}
    
    		@include bp-up(lg) {
    			padding-top: rhythm(6);
    			padding-right: rhythm(8);
    			padding-bottom: rhythm(6);
    			padding-left: rhythm(8);
    		}
    	}
    
    	@include m(custom-border) {
    		border-color: var(--m-info-box-border-color);
    	}
    }
    
  • URL: /components/raw/info-box/_info-box.scss
  • Filesystem Path: src/molecules/info-box/_info-box.scss
  • Size: 820 Bytes

No notes defined.