<div class="twitter-component twitter-component--dark twitter-component--durp twitter-component--large">
<h2 class="twitter-component__heading twitter-component__heading--dark" id="Our Twitter">
<span class="twitter-component__heading-text">
Our Twitter
</span>
<span class="twitter-component__heading-icon" aria-hidden="true">
<svg class="twitter" width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="twitter__bird" fill-rule="evenodd" clip-rule="evenodd" d="M16.6156 0C13.8968 0 11.6936 2.26058 11.6936 5.04839C11.6936 5.44417 11.7345 5.82984 11.819 6.19818C7.72812 5.98729 4.10072 3.97949 1.67072 0.92301C1.2467 1.67124 1.0044 2.53792 1.0044 3.46237C1.0044 5.21306 1.87357 6.75863 3.19493 7.66575C2.38774 7.63975 1.62846 7.41008 0.96355 7.03452V7.09663C0.96355 9.54355 2.65962 11.5846 4.91495 12.0468C4.50079 12.1652 4.06691 12.2245 3.61613 12.2245C3.29917 12.2245 2.98926 12.1941 2.69061 12.1349C3.31608 14.1398 5.13471 15.6016 7.29002 15.6406C5.6038 16.9955 3.48089 17.8015 1.17485 17.8015C0.777602 17.8015 0.384575 17.7799 0 17.7322C2.17926 19.1637 4.76704 20 7.54781 20C16.6057 20 21.5559 12.3068 21.5559 5.63484C21.5559 5.41528 21.5531 5.19717 21.5432 4.98194C22.5054 4.26982 23.3421 3.38004 24 2.36747C23.1167 2.76903 22.1673 3.04059 21.1727 3.16192C22.1898 2.53792 22.9702 1.54846 23.3365 0.369782C22.3842 0.94901 21.3319 1.3679 20.2092 1.59468C19.3133 0.612451 18.0328 0 16.6156 0Z" fill="#FF552E"/>
</svg>
</span>
</h2>
<div class="twitter-component__posts twitter-component__posts--dark">
</div>
<div class="twitter-component__button">
<a href="https://twitter.com/pixotech" class="standard-button standard-button--durp standard-button--dark
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 Twitter</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="twitter-component twitter-component--{{ background }} twitter-component--{{ siteUnit }} twitter-component--{{ componentSpacing }}">
{% if component.heading|default and (component.heading|trim) %}
<h2 class="twitter-component__heading twitter-component__heading--{{ background }}"
id="{{ component.heading|sanitize }}">
<span class="twitter-component__heading-text">
{{ component.heading }}
</span>
<span class="twitter-component__heading-icon" aria-hidden="true">
{% include 'bits/icons/twitter.twig' %}
</span>
</h2>
{% endif %}
<div class="twitter-component__posts twitter-component__posts--{{ background }}">
{% apply shortcodes %}
{{ component.twitterShortcode }}
{% endapply %}
</div>
<div class="twitter-component__button">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'external-link',
style: 'cta-component',
text: 'Follow us on Twitter',
url: 'https://twitter.com/' ~ component.twitterUsername,
width: 'full',
}
} %}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "twitter",
"heading": "Our Twitter",
"twitterUsername": "pixotech"
}
}
.twitter-component
--backgroundColor cloud
--iconBorderColor illiniOrange
--iconFillColor illiniOrange
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&--dark
--backgroundColor charcoalLighter
--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
& .twitter__bird
fill var(--iconFillColor)
&__posts
@extends $richText
&--dark
@extends $richTextOnDark
&__button
fluid(margin-top, 500px, maxContentWidth, 32px, 48px)
#ctf#ctf
& .ctf-tweet-content
margin 0
padding 24px
& .ctf-tweet-media
margin-bottom 16px
margin-top 16px
&.ctf-masonry
& .ctf-item
padding 0
background-color var(--backgroundColor)
There are no notes for this item.