<div class="instagram-component instagram-component--light instagram-component--network instagram-component--large">
<h2 class="instagram-component__heading instagram-component__heading--light" id="">
<span class="instagram-component__heading-text">
Our Instagram
</span>
<span class="instagram-component__heading-icon" aria-hidden="true">
<svg class="instagram" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="instagram__camera" fill-rule="evenodd" clip-rule="evenodd" d="M18 0L18.2995 0.00734296C21.3985 0.159666 23.8793 2.66319 23.9957 5.77151L24 6V18L23.9927 18.2995C23.8403 21.3985 21.3368 23.8793 18.2285 23.9957L18 24H6L5.70054 23.9927C2.60154 23.8403 0.120651 21.3368 0.0042705 18.2285L0 18V6L0.00734296 5.70054C0.159666 2.60154 2.66319 0.120651 5.77151 0.0042705L6 0H18ZM17.993 2H6C3.93434 2 2.22293 3.57043 2.02178 5.55026L2.00674 5.74957L2 6V18C2 20.0657 3.57043 21.7771 5.55026 21.9782L5.74957 21.9933L6 22H18C20.0657 22 21.7771 20.4296 21.9782 18.4497L21.9933 18.2504L22 18V6C22 3.93434 20.4296 2.22293 18.4497 2.02178L18.2504 2.00674L17.993 2ZM18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM20 5.5C20 4.67157 19.3284 4 18.5 4C17.6716 4 17 4.67157 17 5.5C17 6.32843 17.6716 7 18.5 7C19.3284 7 20 6.32843 20 5.5Z" fill="#FF552E"/>
</svg>
</span>
</h2>
<div class="instagram-component__button">
<a href="https://instagram.com/pixotech" class="standard-button standard-button--network standard-button--light
standard-button--full-width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Follow us on Instagram</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16"><path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/></svg></span></span>
</div>
</a>
</div>
</div>
<div class="instagram-component instagram-component--{{ background }} instagram-component--{{ siteUnit }} instagram-component--{{ componentSpacing }}">
{% if component.heading|default and (component.heading|trim) %}
<h2 class="instagram-component__heading instagram-component__heading--{{ background }}"
id="{{ post.title|sanitize }}">
<span class="instagram-component__heading-text">
{{ component.heading }}
</span>
<span class="instagram-component__heading-icon" aria-hidden="true">
{% include 'bits/icons/instagram.twig' %}
</span>
</h2>
{% endif %}
{% if component.instagramShortcode %}
<div class="instagram-component__posts">
{% apply shortcodes %}
{{ component.instagramShortcode }}
{% endapply %}
</div>
{% endif %}
<div class="instagram-component__button">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'external-link',
style: 'cta-component',
text: 'Follow us on Instagram',
url: 'https://instagram.com/' ~ component.instagramUsername,
width: 'full',
}
} %}
</div>
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "instagram",
"heading": "Our Instagram",
"instagramUsername": "pixotech"
}
}
.instagram-component
--iconBorderColor illiniOrange
--iconFillColor illiniOrange
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&--dark
--iconFillColor white
&--arch
--iconBorderColor industrialBlue
--iconFillColor industrialBlue
&--art
--iconBorderColor archesBlue
--iconFillColor archesBlue
&--college
--iconBorderColor illiniOrange
--iconFillColor illiniBlue
&--dance
--iconBorderColor archesBlue
--iconFillColor archesBlue
&--landarch
--iconBorderColor illiniOrange
--iconFillColor black
&--theatre
--iconBorderColor illiniOrange
--iconFillColor illiniOrange
&--music
--iconBorderColor illiniOrange
--iconFillColor illiniBlue
&__heading
@extends $headline1
fluid(margin-bottom, 500px, maxContentWidth, 32px, 48px)
display flex
justify-content space-between
&__heading-icon
border 2px solid var(--iconBorderColor)
border-radius 50px
display flex
width 48px
height 48px
justify-content center
align-items center
& .instagram__camera
fill var(--iconFillColor)
&__button
fluid(margin-top, 500px, maxContentWidth, 32px, 48px)
There are no notes for this item.