Internetstiftelsen Styleguide

Features box: Large Text 

<div class="o-features-box o-features-box--large-text background-lemon  ">
    <h2 class="u-m-b-3 supersize">Vårt utbud i Stockholm</h2>
    <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-wifi"></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-podcast"></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-3d"></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-capacity"></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>
        <li class="o-features-box__list__item">
            <div class="o-features-box__list__icon"><svg class="icon u-icon">
                    <use xlink:href="#icon-cafe"></use>
                </svg>
            </div>
            <div>kologiskt café med lunchservering</div>
        </li>
    </ul>

</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": "lemon",
  "padding": "u-p-x-6 u-p-t-4 u-p-b-6",
  "height": "",
  "heading": "Vårt utbud i Stockholm",
  "heading_classes": "u-m-b-3 supersize",
  "button": false,
  "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": "wifi"
    },
    {
      "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": "podcast"
    },
    {
      "li_text": "5 headsets och 4 handmikrofoner",
      "icon": "3d"
    },
    {
      "li_text": "Riggat för livesändning",
      "icon": "capacity"
    },
    {
      "li_text": "Rullstolsanpassad lokal med ramp",
      "icon": "accessibility"
    },
    {
      "li_text": "kologiskt café med lunchservering",
      "icon": "cafe"
    }
  ],
  "modifier": "large-text"
}
  • Content: 
    @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;
	}
}
  • URL: /components/raw/features-box/_features-box.scss
  • Filesystem Path: src/organisms/features-box/_features-box.scss
  • Size: 1.4 KB

Features box

Variants

Full height

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.