<a href="https://sproutsocial.com" id="" class="IconBlock IconBlock--small" style="">
    <img
                src="data:image/svg+xml,%3Csvg xmlns&#x3D;&#x27;http://www.w3.org/2000/svg&#x27; xmlns:xlink&#x3D;&#x27;http://www.w3.org/1999/xlink&#x27; viewBox&#x3D;&#x27;-413 473 140 140&#x27;%3E%3Ctitle%3Eintegrations-icon-analyze%3C/title%3E%3Ccircle fill&#x3D;&#x27;%23F5F5F5&#x27; cx&#x3D;&#x27;-343&#x27; cy&#x3D;&#x27;543&#x27; r&#x3D;&#x27;70&#x27;/%3E%3Cpath fill&#x3D;&#x27;%235ACC5A&#x27; d&#x3D;&#x27;M-310.4 566.2l-22-31.3c-.9-1.2-1.3-2.6-1.3-4v-18h1.7c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-19.4c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h1.7v17.9c0 1.5-.4 2.9-1.3 4.1l-22 31.3c-2.9 4.1.1 9.7 5.1 9.7h52.4c5 0 7.9-5.6 5.1-9.7z&#x27;/%3E%3Cpath fill&#x3D;&#x27;%232CB757&#x27; d&#x3D;&#x27;M-361.4 549.7l-11.6 16.5c-2.9 4.1.1 9.7 5.1 9.7h26.2v-26.2h-19.7z&#x27;/%3E%3Cpath fill&#x3D;&#x27;%2300A84B&#x27; d&#x3D;&#x27;M-341.7 575.9h26.2c5 0 7.9-5.6 5.1-9.7l-11.6-16.5h-19.7v26.2z&#x27;/%3E%3Cpath fill&#x3D;&#x27;%2375DD66&#x27; d&#x3D;&#x27;M-341.7 506.1h-9.7c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h1.7v17.9c0 1.5-.4 2.9-1.3 4.1l-10.4 14.8h19.7v-43.6z&#x27;/%3E%3Cpath fill&#x3D;&#x27;%235ACC5A&#x27; d&#x3D;&#x27;M-333.7 530.9v-18h1.7c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-9.7v43.6h19.7l-10.4-14.8c-.9-1.2-1.3-2.6-1.3-4z&#x27;/%3E%3Cpath fill&#x3D;&#x27;%2300A84B&#x27; d&#x3D;&#x27;M-333.7 512.9h-5.3l5.3 5.3z&#x27;/%3E%3C/svg%3E"
        
        alt=""
    />
        <div class="IconBlock-link">Cool Link</div>
</a>
<{{#if href}}a href="{{href}}"{{else}}button{{/if}}
        id="{{id}}"
        class="IconBlock {{modifier}}"
        style="{{style}}"
>
    <img
        {{#if src2x}}
            {{#if lazyload}}
                data-src="{{src}}|{{src2x}}"
            {{else}}
                srcset="{{src}}, {{src2x}} 2x"
            {{/if}}
        {{else}}
            {{#if svgurl2x}}
                {{#if lazyload}}
                    data-src="{{svgurl}}|{{svgurl2x}}"
                {{else}}
                    srcset="{{svgurl}}, {{svgurl2x}} 2x"
                {{/if}}
            {{else}}
                {{#if lazyload}}data-{{/if}}src="{{#if svgurl}}{{svgurl}}{{else}}{{src}}{{/if}}"
            {{/if}}
        {{/if}}
        {{#if lazyload}}class="b-lazy" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgNTYwIj48cGF0aCBmaWxsPSIjRjNGNEY0IiBkPSJNMCAwaDk2MHY1NjBIMHoiLz48L3N2Zz4="{{/if}}
        alt="{{alt}}"
    />
    {{#if linktext}}
        <div class="IconBlock-link">{{{linktext}}}</div>
    {{/if}}
</{{#if href}}a{{else}}button{{/if}}>
{
  "id": null,
  "modifier": "IconBlock--small",
  "href": "https://sproutsocial.com",
  "lazyload": null,
  "alt": null,
  "src": null,
  "src2x": null,
  "svgurl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-413 473 140 140'%3E%3Ctitle%3Eintegrations-icon-analyze%3C/title%3E%3Ccircle fill='%23F5F5F5' cx='-343' cy='543' r='70'/%3E%3Cpath fill='%235ACC5A' d='M-310.4 566.2l-22-31.3c-.9-1.2-1.3-2.6-1.3-4v-18h1.7c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-19.4c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h1.7v17.9c0 1.5-.4 2.9-1.3 4.1l-22 31.3c-2.9 4.1.1 9.7 5.1 9.7h52.4c5 0 7.9-5.6 5.1-9.7z'/%3E%3Cpath fill='%232CB757' d='M-361.4 549.7l-11.6 16.5c-2.9 4.1.1 9.7 5.1 9.7h26.2v-26.2h-19.7z'/%3E%3Cpath fill='%2300A84B' d='M-341.7 575.9h26.2c5 0 7.9-5.6 5.1-9.7l-11.6-16.5h-19.7v26.2z'/%3E%3Cpath fill='%2375DD66' d='M-341.7 506.1h-9.7c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h1.7v17.9c0 1.5-.4 2.9-1.3 4.1l-10.4 14.8h19.7v-43.6z'/%3E%3Cpath fill='%235ACC5A' d='M-333.7 530.9v-18h1.7c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-9.7v43.6h19.7l-10.4-14.8c-.9-1.2-1.3-2.6-1.3-4z'/%3E%3Cpath fill='%2300A84B' d='M-333.7 512.9h-5.3l5.3 5.3z'/%3E%3C/svg%3E",
  "svgurl2x": null,
  "style": null,
  "linktext": "Cool Link"
}
  • Content:
    .IconBlock {
        @include font-size-small;
        @include font-weight-semibold;
        text-align: center;
        > svg,
        > img {
            display: block;
            width: 150px;
            height: 150px;
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
            // TODO: The border-radius may be causing clipping in Safari. Will a container fix it?
            border-radius: 50%;
        }
        &--small {
            width: auto;
        }
        &--small > svg,
        &--small > img {
            width: 60px;
            height: 60px;
            max-width: 100%;
            max-height: 100%;
        }
        &--link {
            > svg,
            > img {
                @include Elevation("Button");
                transition: transform $transition-time-default $transition-move-default;
            }
            &:hover,
            &:focus {
                color: theme-color(main, dark);
                text-decoration: none;
                > svg,
                > img {
                    @include Elevate("Button-hover");
                }
            }
            &:active {
                text-decoration: none;
                > svg,
                > img {
                    @include Elevation("Button-pressed", $shouldTranslate: true);
                }
            }
        }
        &-link {
            @include spaced-out;
            margin-top: Space(400);
        }
    }
    
  • URL: /components/raw/iconblock/IconBlock.scss
  • Filesystem Path: components/atoms/IconBlock/IconBlock.scss
  • Size: 1.3 KB

There are no notes for this item.