Component Library

Icon Box 

<article class="icon-box ">
    <div class="icon-box__inner">
        <div class="icon-box__content">
            <div class="icon-box__icon">
                <svg class="svg-icon  ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-checkbox"></use>
                    </svg> </div>
            <h2 class="heading heading--column ">Icon Box header</h2>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
        <a href="url" title="Link title" target="" class="link   " property="url">Link text</a>
    </div>
</article>
 
<article class="icon-box {{ class }}">
	<div class="icon-box__inner">
		<div class="icon-box__content">
            <div class="icon-box__icon">
                {{#block "icon-box-icon"}}
                    {{> '@svg-icon' }}
                {{/block}}
            </div>
			{{> '@heading--column' heading }}
			{{#block "iconBoxContent"}}
				<p>{{ iconBoxContent }}</p>
			{{/block}}
		</div>
        {{#if link }}
            {{> '@link' link }}
        {{/if}}
	</div>
</article>
 
{
  "heading": {
    "text": "Icon Box header"
  },
  "iconBoxContent": "Lorem ipsum dolor sit amet",
  "svgIconName": "icon-checkbox",
  "link": {
    "url": "url",
    "text": "Link text",
    "target": null,
    "title": "Link title"
  }
}
  • Content: 
    /*
 * Module: Text Box
 */

:root {
    --icon-box-background-color: var(--color-white);
    --icon-box-border-style: 1px solid var(--color-gray-light);
    --icon-box-border-radius: 4px;
    --icon-box-padding: 20px;
    --icon-box-paragraph-spacing-top: 15px;
}

.icon-box {
    text-align: center;

    &__inner {
        padding: var(--icon-box-padding);
    }

    p + p {
        margin-top: var(--icon-box-paragraph-spacing-top);
    }
}

.icon-box__icon svg {
    height: 72px;
    width: 72px;
}
  • URL: /components/raw/icon-box/icon-box.css
  • Filesystem Path: src/02-molecules/box/icon-box/icon-box.css
  • Size: 505 Bytes

There are no notes for this item.