<div class="related-content related-content--network related-content--light">
    <h2 class="related-content__title id=" relatedcontent ">Related Content</h2>
        <div class="related-content__cards-container ">
                                                <div class="related-content__card ">
                        <article class="card-with-image card-with-image--light ">
    <div class="card-with-image__content ">
                <div class="related-event-card-content related-event-card-content--network ">
                            <div class="related-event-card-content__listing-link ">Event</div>
                        <div class="event-data-with-icon ">
    <div class="event-data-with-icon__icon ">
                            </div>
    <div class="event-data-with-icon__detail ">
                            <div class="related-event-card-content__title ">
                        <h2 class="linked-title linked-title--network linked-title--light ">
    <a
        href="http://localhost:3000/components/detail/event "
        class=" linked-title__link linked-title__link--light ">
        Re-imagining Realities: Using Digital Vernaculars for Physical Change<span class="linked-title__link-icon ">&nbsp;<svg class="right-chevron " xmlns="http://www.w3.org/2000/svg " aria-hidden="true " width="8 " height="16 " viewBox="0 0 8 16 ">
    <path class="_mark right-chevron__shape " fill="#FF552E " fill-rule="nonzero " d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z "/>
</svg>

</span>
    </a>
</h2>
                    </div>
                    <div class="related-event-card-content__date related-event-card-content__date--light ">
                                                    <span class="related-event-card-content__recurring-icon ">
                                <svg class="recurring-icon " xmlns="http://www.w3.org/2000/svg " width="20 " height="20 " viewBox="0 0 20 20 " fill="none ">
    <path class="recurring-icon__shape " fill-rule="evenodd " clip-rule="evenodd " d="M2 3.9994V0H0V8L7 8V6L3.06996 6C4.45368 3.60799 7.03998 2 10 2C14.4183 2 18 5.58172 18 10H20C20 4.47715 15.5228 0 10 0C6.72775 0 3.82396 1.57138 2 3.9994ZM2 10C2 14.4183
        5.58172 18 10 18C12.96 18 15.5463 16.392 16.93 14H13V12H20V20H18V16.0006C16.176 18.4286 13.2723 20 10 20C4.47715 20 0 15.5228 0 10H2Z " fill="#FF552E "/>
</svg>
                            </span>
                                                February 11, 2020
                    </div>
                    <div class="related-event-card-content__time related-event-card-content__time--light ">
                                                    <span class="related-event-card-content__dayofweek ">Tuesday, </span>
                                                                            12:30 PM - 12:30 PM
                                            </div>
                                                                        <div class="related-event-card-content__location related-event-card-content__location--light ">
                                                                    611 Taft Drive
 Champaign IL 61820
                                                                                                                            </div>
                                                    <div class="related-event-card-content__location related-event-card-content__location--light ">
                                                                                                                                    Details coming soon
                                                            </div>
                                                                </div>
</div>
        </div>
        </div>
        <div class="card-with-image__image ">
                </div>
    </article>
                    </div>
                                                                            <div class="related-content__card ">
                        <article class="card-with-image card-with-image--light ">
    <div class="card-with-image__content ">
                <div class="related-news-card-content related-news-card-content--network ">
                            <div class="related-news-card-content__listing-link ">News</div>
                        <div class="related-news-card-content__title ">
                <h2 class="linked-title linked-title--network linked-title--light ">
    <a
        href="http://localhost:3000/components/detail/news "
        class=" linked-title__link linked-title__link--light ">
        The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists<span class="linked-title__link-icon ">&nbsp;<svg class="right-chevron " xmlns="http://www.w3.org/2000/svg " aria-hidden="true
        " width="8 " height="16 " viewBox="0 0 8 16 ">
    <path class="_mark right-chevron__shape " fill="#FF552E " fill-rule="nonzero " d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z "/>
</svg>

</span>
    </a>
</h2>
            </div>
            <div class="related-news-card-content__date related-news-card-content__date--light ">
                November 19, 2019
            </div>
        </div>
        </div>
        <div class="card-with-image__image ">
                </div>
    </article>
                    </div>
                                                                        <div class="related-content__card ">
                    <div class="related-profile-card related-profile-card--network ">
<article class="related-person-card related-person-card--light related-person-card--network ">
    <div class="related-person-card__info-and-related ">
        <div class="related-person-card__info ">
                                        <div class="related-profile-card__listing-link ">People</div>
                <div class="related-profile-card__title ">
            <div class="card-title ">
    <div class="card-title__title ">
    <h2 class="linked-title linked-title--network linked-title--light ">
    <a
        href="# "
        class=" linked-title__link linked-title__link--light ">
        Sean Kennedy<span class="linked-title__link-icon ">&nbsp;<svg class="right-chevron " xmlns="http://www.w3.org/2000/svg " aria-hidden="true " width="8 " height="16 " viewBox="0 0 8 16 ">
    <path class="_mark right-chevron__shape " fill="#FF552E " fill-rule="nonzero " d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z "/>
</svg>

</span>
    </a>
</h2>
    </div>
</div>
        </div>
                <div class="related-profile-card__current ">
            <div class="related-profile-card__titles ">
                Lecturer of Urban and Regional Planning, MSSUM Program Director
                            </div>
        </div>
                        <div class="related-profile-card__contact ">
                        <div class="related-profile-card__contact-email ">
                <a href="mailto:tthomas@uiuc.edu " class="related-profile-card__contact-email-link ">
                    tthomas@uiuc.edu
                </a>
            </div>
                                    <div class="related-profile-card__contact-phone ">
                <a href="tel:217.244.6531 " class="related-profile-card__contact-phone-link ">
                    217.244.6531
                </a>
            </div>
                    </div>
                    </div>
        <div class="related-person-card__related ">
                    <span class="badge ">
    Core Staff
</span>
                </div>
    </div>
</article>
</div>
                </div>
                                                        <div class="related-content__card ">
                    <article class="card-with-image card-with-image--light ">
    <div class="card-with-image__content ">
                <div class="related-work-card-content related-work-card-content--network ">
                            <div class="related-work-card-content__listing-link ">Work</div>
                        <div class="related-work-card-content__title ">
                <h2 class="linked-title linked-title--network linked-title--light ">
    <a
        href="http://localhost:3000/components/detail/work "
        class=" linked-title__link linked-title__link--light ">
        Lorem ipsum dolor sit consectetuer
adipiscing elit<span class="linked-title__link-icon ">&nbsp;<svg class="right-chevron " xmlns="http://www.w3.org/2000/svg " aria-hidden="true " width="8 " height="16 " viewBox="0 0 8 16 ">
    <path class="_mark right-chevron__shape " fill="#FF552E " fill-rule="nonzero " d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z "/>
</svg>

</span>
    </a>
</h2>
            </div>
            <div class="related-work-card-content__creators related-work-card-content__creators--light ">
                Creator Name
            </div>
        </div>
        </div>
        <div class="card-with-image__image ">
                </div>
    </article>

                </div>
                    </div>
    </div>
{% if relatedContent.events or relatedContent.news or relatedContent.profiles or relatedContent.work %}
    <div class="related-content related-content--{{ siteUnit }} related-content--{{ background }}">
        <h2 class="related-content__title id="relatedcontent">Related Content</h2>
        <div class="related-content__cards-container">
            {% if relatedContent.events | default %}
                {% for event in relatedContent.events[0:1] %}
                    <div class="related-content__card">
                        {% include 'partials/related-event-card/related-event-card.twig' %}
                    </div>
                {% endfor %}
            {% endif %}
            {% if relatedContent.news | default %}
                {% for story in relatedContent.news[0:1] %}
                    <div class="related-content__card">
                        {% include 'partials/related-news-card/related-news-card.twig' %}
                    </div>
                {% endfor %}
            {% endif %}
            {% if relatedContent.profiles | default %}
                {% set person = random(relatedContent.profiles) %}
                <div class="related-content__card">
                    {% include 'partials/related-profile-card/related-profile-card.twig' with {
                        type: person.profileType
                    } %}
                </div>
            {% endif %}
            {% if relatedContent.work | default %}
                {% set work = random(relatedContent.work) %}
                <div class="related-content__card">
                    {% include 'partials/related-work-card/related-work-card.twig' %}
                </div>
            {% endif %}
        </div>
    </div>
{% endif %}
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "title": "Related Content",
  "relatedContent": {
    "events": [
      {
        "title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
        "fullDate": "February 11, 2020",
        "unit": "college",
        "isRecurring": 1,
        "startTime": "12:30 PM",
        "endTime": "12:30 PM",
        "startDayOfWeek": "Tuesday",
        "shortStartMonth": "Feb",
        "startDay": "11",
        "locations": [
          {
            "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
            "buildingNumber": "Room M230 Temple Buell Hall"
          },
          {
            "virtualLocation": "https://zoom.com",
            "locationText": "Details coming soon"
          }
        ],
        "permalink": "http://localhost:3000/components/detail/event",
        "addImage": true,
        "featuredImage": {
          "src": "https://picsum.photos/800/600?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
        "fullDate": "February 15, 2020",
        "shortStartMonth": "Feb",
        "startDay": "15",
        "startTime": "12:30 PM",
        "endTime": "12:30 PM",
        "startDayOfWeek": "Tuesday",
        "locations": [
          {
            "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
            "buildingNumber": "Room M230 Temple Buell Hall"
          },
          {
            "virtualLocation": "https://zoom.com",
            "locationText": "Details coming soon"
          }
        ],
        "permalink": "http://localhost:3000/components/detail/event"
      },
      {
        "title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
        "fullDate": "February 22, 2020",
        "isRecurring": 1,
        "startTime": "12:30 PM",
        "endTime": "12:30 PM",
        "startDayOfWeek": "Tuesday",
        "shortStartMonth": "Feb",
        "startDay": "22",
        "locations": [
          {
            "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
            "buildingNumber": "Room M230 Temple Buell Hall"
          },
          {
            "virtualLocation": "https://zoom.com",
            "locationText": "Details coming soon"
          }
        ],
        "permalink": "http://localhost:3000/components/detail/event",
        "addImage": true,
        "featuredImage": {
          "src": "https://picsum.photos/800/600?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
        "fullDate": "February 25, 2020",
        "startTime": "12:30 PM",
        "endTime": "12:30 PM",
        "startDayOfWeek": "Tuesday",
        "shortStartMonth": "Feb",
        "startDay": "25",
        "locations": [
          {
            "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
            "buildingNumber": "Room M230 Temple Buell Hall"
          },
          {
            "virtualLocation": "https://zoom.com",
            "locationText": "Details coming soon"
          }
        ],
        "permalink": "http://localhost:3000/components/detail/event",
        "addImage": true,
        "featuredImage": {
          "src": "https://picsum.photos/800/600?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "Re-imagining Realities: Using Digital Vernaculars for Physical Change",
        "fullDate": "February 29, 2020",
        "isRecurring": 1,
        "startTime": "12:30 PM",
        "endTime": "12:30 PM",
        "startDayOfWeek": "Tuesday",
        "shortStartMonth": "Feb",
        "startDay": "29",
        "locations": [
          {
            "physicalAddress": "611 Taft Drive\r\n Champaign IL 61820",
            "buildingNumber": "Room M230 Temple Buell Hall"
          },
          {
            "virtualLocation": "https://zoom.com",
            "locationText": "Details coming soon"
          }
        ],
        "permalink": "http://localhost:3000/components/detail/event",
        "addImage": true,
        "featuredImage": {
          "src": "https://picsum.photos/800/600?random=1",
          "altText": "friendly kitten"
        }
      }
    ],
    "news": [
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "unit": "college",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "unit": "music",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "unit": "urban planning",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      },
      {
        "title": "The University of Illinois Promoted to a Silver Bicycle Friendly University by the League of American Bicyclists",
        "permalink": "http://localhost:3000/components/detail/news",
        "publishDate": "November 19, 2019",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "friendly kitten"
        }
      }
    ],
    "profiles": [
      {
        "fullName": "Dustin Allred",
        "titles": "Lecturer of Urban and Regional Planning, MSSUM Program Director",
        "photo": {
          "src": "https://picsum.photos/272/352?random=1",
          "altText": "friendly kitten"
        },
        "emailAddress": "tthomas@uiuc.edu",
        "phoneNumber": "217.244.6531",
        "profileTypeLabel": "Core Staff",
        "permalink": "#"
      },
      {
        "fullName": "Lindsay M. Braun",
        "titles": "Lecturer of Urban and Regional Planning, MSSUM Program Director",
        "photo": {
          "src": "https://picsum.photos/272/352?random=1",
          "altText": "friendly kitten"
        },
        "emailAddress": "tthomas@uiuc.edu",
        "phoneNumber": "217.244.6531",
        "profileTypeLabel": "Core Staff",
        "permalink": "#"
      },
      {
        "fullName": "Marc Doussard",
        "titles": "Lecturer of Urban and Regional Planning, MSSUM Program Director",
        "photo": {
          "src": "https://picsum.photos/272/352?random=1",
          "altText": "friendly kitten"
        },
        "emailAddress": "tthomas@uiuc.edu",
        "phoneNumber": "217.244.6531",
        "profileTypeLabel": "Core Staff",
        "permalink": "#"
      },
      {
        "fullName": "Fang Fang",
        "titles": "Lecturer of Urban and Regional Planning, MSSUM Program Director",
        "photo": {
          "src": "https://picsum.photos/272/352?random=1",
          "altText": "friendly kitten"
        },
        "emailAddress": "tthomas@uiuc.edu",
        "phoneNumber": "217.244.6531",
        "profileTypeLabel": "Core Staff",
        "permalink": "#"
      },
      {
        "fullName": "Sean Kennedy",
        "titles": "Lecturer of Urban and Regional Planning, MSSUM Program Director",
        "photo": {
          "src": "https://picsum.photos/272/352?random=1",
          "altText": "friendly kitten"
        },
        "emailAddress": "tthomas@uiuc.edu",
        "phoneNumber": "217.244.6531",
        "profileTypeLabel": "Core Staff",
        "permalink": "#"
      }
    ],
    "work": [
      {
        "title": "Quisque volutpat mattis eros",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name, Creator Name, and Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Lorem ipsum dolor sit consectetuer
adipiscing elit",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Strategies for Architectual Design",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architecture and the City",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Associate Professor Therese Tierney",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architectural Design & Development",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Lecturer Bhujon Kang",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Quisque volutpat mattis eros",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name, Creator Name, and Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Lorem ipsum dolor sit consectetuer
adipiscing elit",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Creator Name",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Strategies for Architectual Design",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Assistant Professor Aneesha Dharwadker & Teaching Assistant Professor Andrea Melgarejo de Berry",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architecture and the City",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Associate Professor Therese Tierney",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      },
      {
        "title": "Architectural Design & Development",
        "permalink": "http://localhost:3000/components/detail/work",
        "creators": "Lecturer Bhujon Kang",
        "featuredImage": {
          "src": "https://picsum.photos/320/228?random=1",
          "altText": "building"
        }
      }
    ]
  }
}
  • Content:
    .related-content
        @extends $componentWithMargin
    
        &--dark
            --textColor white
    
        &--light
            --backgroundColor cloud
            --textColor charcoalLight
    
        &__title
            @extends $headline1
            color var(--textColor)
            margin-bottom 48px
    
        &__post-type-label
            @extends $headline2
            color var(--textColor)
            margin-bottom 24px
    
        &__cards-container
            display grid
            grid-template-columns 1fr
            margin-bottom 64px
    
            +above(1000px)
                grid-gap 24px
                grid-template-columns 1fr 1fr
    
        &__card
            background-color var(--backgroundColor)
            margin-bottom 24px
    
            +above(1000px)
                margin-bottom 0
    
  • URL: /components/raw/related-content/related-content.styl
  • Filesystem Path: components/partials/related-content/related-content.styl
  • Size: 718 Bytes

There are no notes for this item.