<div class="facebook-component facebook-component--light facebook-component--durp facebook-component--large">
<h2 class="facebook-component__heading facebook-component__heading--light" id="true">
<span class="facebook-component__heading-text">
Our Facebook
</span>
<span class="facebook-component__heading-icon" aria-hidden="true">
<svg class="facebook" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
<path class="facebook__logo" fill="#FFF" fill-rule="evenodd" d="M11.976 0h-3.55C4.288 0 2.751 1.887 2.662 5.078l-.004.302v2.483H0v4.135h2.659V24h5.32V11.998h3.55L12 7.863H7.979l.007-2.07c0-1.022.099-1.594 1.521-1.651l.25-.005h2.219V0z"/>
</svg>
</span>
</h2>
<div class="facebook-component__button">
<a href="https://facebook.com/pixotech" class="standard-button standard-button--durp 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 Facebook</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="facebook-component facebook-component--{{ background }} facebook-component--{{ siteUnit }} facebook-component--{{ componentSpacing }}">
{% if component.heading|default %}
<h2 class="facebook-component__heading facebook-component__heading--{{ background }}"
id="{{ component.heading|sanitize and (component.heading|trim) }}">
<span class="facebook-component__heading-text">
{{ component.heading }}
</span>
<span class="facebook-component__heading-icon" aria-hidden="true">
{% include 'bits/icons/facebook.twig' %}
</span>
</h2>
{% endif %}
{% if component.facebookShortcode %}
<div class="facebook-component__posts facebook-component__posts--{{ background }}">
{% apply shortcodes %}
{{ component.facebookShortcode }}
{% endapply %}
</div>
{% endif %}
<div class="facebook-component__button">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'external-link',
style: 'cta-component',
text: 'Follow us on Facebook',
url: 'https://facebook.com/' ~ component.facebookUsername,
width: 'full',
}
} %}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "facebook",
"heading": "Our Facebook",
"facebookUsername": "pixotech"
}
}
.facebook-component
--backgroundColor cloud
--iconBorderColor illiniOrange
--iconFillColor illiniOrange
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&--dark
--backgroundColor charcoalLighter
--iconBorderColor illiniOrange
--iconFillColor white
&--arch
--backgroundColor cloud
--iconBorderColor industrialBlue
--iconFillColor industrialBlue
&--art
--backgroundColor cloud
--iconBorderColor archesBlue
--iconFillColor archesBlue
&--college
--backgroundColor cloud
--iconBorderColor illiniOrange
--iconFillColor illiniBlue
&--dance
--backgroundColor cloud
--iconBorderColor archesBlue
--iconFillColor archesBlue
&--landarch
--backgroundColor cloud
--iconBorderColor illiniOrange
--iconFillColor black
&--theatre
--backgroundColor cloud
--iconBorderColor illiniOrange
--iconFillColor illiniOrange
&--music
--backgroundColor cloud
--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
& .facebook__logo
fill var(--iconFillColor)
&__posts
@extends $richText
&--dark
@extends $richTextOnDark
&__button
fluid(margin-top, 500px, maxContentWidth, 32px, 48px)
#cff.cff-masonry
margin-bottom 0
#cff a
#cff a:hover
text-decoration none
#cff .cff-lightbox-link:hover
background-color transparent
#cff#cff.cff-masonry .cff-item
background var(--backgroundColor)
padding 0
#cff#cff
& .cff-meta-wrap
margin 0
& .cff-post-text
padding 24px
margin 0
There are no notes for this item.