<a href="https://sproutsocial.com" id="" class="IconBlock IconBlock--small" style="">
<img
src="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"
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"
}
.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);
}
}
There are no notes for this item.