<div class="o-features-box background-snow  ">
    <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-pin"></use>
                </svg>
            </div>
            <div><span>Gradängen, Goto10</span><br /><span class="color-granit">Hammarby Slussväg 4, 118 60 Stockholm</span></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-time"></use>
                </svg>
            </div>
            <div>Vardagar: 8:00-17:00<br />Helger: Stängt</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-email"></use>
                </svg>
            </div>
            <div><a href="mailto:info@goto10.se">info@goto10.se</a></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-phone"></use>
                </svg>
            </div>
            <div><a href="tel:08-10 10 10">08–10 10 10</a></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-streaming"></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>
    </ul>

    <div class="row u-m-t-4">
        <div class="grid-18">
            <a class="a-button a-button--lemon">
                <span class="a-button__text">Alla kontaktuppgifter</span>
            </a>
        </div>
    </div>

</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": "snow",
  "padding": "u-p-x-4 u-p-t-3 u-p-b-4",
  "height": "",
  "heading": false,
  "heading_classes": false,
  "button": true,
  "button_icon": false,
  "button_text": "Alla kontaktuppgifter",
  "additional_classes": false,
  "button_modifiers": "lemon",
  "list_items": [
    {
      "li_text": "<span>Gradängen, Goto10</span><br /><span class=\"color-granit\">Hammarby Slussväg 4, 118 60 Stockholm</span>",
      "icon": "pin"
    },
    {
      "li_text": "Vardagar: 8:00-17:00<br />Helger: Stängt",
      "icon": "time"
    },
    {
      "li_text": "<a href=\"mailto:info@goto10.se\">info@goto10.se</a>",
      "icon": "email"
    },
    {
      "li_text": "<a href=\"tel:08-10 10 10\">08–10 10 10</a>",
      "icon": "phone"
    },
    {
      "li_text": "Riggat för livesändning",
      "icon": "streaming"
    },
    {
      "li_text": "Rullstolsanpassad lokal med ramp",
      "icon": "accessibility"
    }
  ],
  "modifier": false,
  "button_classes": false
}
  • Content:
    @charset "UTF-8";
    
    @include organism(features-box) {
    	padding: rhythm(2) rhythm(3) rhythm(3) rhythm(3);
    	border-radius: $border-radius;
    
    	@include bp-up(lg) {
    		padding: rhythm(3) rhythm(4) rhythm(4) rhythm(4);
    	}
    
    	@include m(large-text) {
    		@include bp-up(lg) {
    			padding: rhythm(4) rhythm(6) rhythm(6) rhythm(6);
    		}
    	}
    
    	@include e(list) {
    		margin: 0;
    		padding: 0;
    		list-style: none;
    
    		@include e(item) {
    			display: flex;
    			margin-bottom: rhythm(2);
    
    			a {
    				@extend %link-styles;
    			}
    		}
    
    		@include e(icon) {
    			display: flex;
    			margin-right: rhythm(2);
    
    			> svg {
    				margin-top: rhythm(0.5);
    			}
    
    			@include bp-up(lg) {
    				margin-right: rhythm(4);
    			}
    		}
    	}
    
    	@include 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: 772 Bytes

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.