Internetstiftelsen Styleguide

Info Box: Big 

<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.