Internetstiftelsen Styleguide

Info Box: Default 

<style media="screen">
    :root {
        --m-info-box-border-color: #c27fec;
    }
</style>
<div class="m-info-box">
    <ul>
        <li>Nyttan med öppna licenser</li>
        <li>Att skilja på olika sorters licenser</li>
        <li>Om företagande och öppen källkod</li>
        <li>Hur du använder licenserna i praktiken</li>
        <li>Klargör vilka marknader du riktar dig till och registrera relevanta domäner.</li>
    </ul>
</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": "<ul><li>Nyttan med öppna licenser</li><li>Att skilja på olika sorters licenser</li><li>Om företagande och öppen källkod</li><li>Hur du använder licenserna i praktiken</li><li>Klargör vilka marknader du riktar dig till och registrera relevanta domäner.</li></ul>"
}
  • Content: 
    @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);
	}
}
  • URL: /components/raw/info-box/_info-box.scss
  • Filesystem Path: src/molecules/info-box/_info-box.scss
  • Size: 1.4 KB

No notes defined.