Component Library

Home Announcement: Alert 

<div class="home-announcement">
    <span class="fak fa-iastate22-exclamation-point" aria-hidden="true"></span>
    <div class="home-announcement__text">
        <p>Announcement Title Lorem Ipsum Dolor <a href="https://www.iastate.edu/">Read More<span class="visible-for-screen-readers">About Announcement Title Lorem Ipsum Dolor</span></a></p>
    </div>
</div>
 
<div class="home-announcement">
  <span class="fak fa-iastate22-exclamation-point" aria-hidden="true"></span>
  <div class="home-announcement__text"><p>{{ text }} <a href="{{ link.url }}">{{ link.text }}<span class="visible-for-screen-readers">About {{ text }}</span></a></p></div>
</div>
 
{
  "text": "Announcement Title Lorem Ipsum Dolor",
  "link": {
    "url": "#",
    "text": "Read More"
  }
}
  • Content: 
    .home-announcement {
  background-color: $iastate-dark-blue;
  padding: rem(12) rem(60) rem(12) rem(40);
  display: flex;
  align-items: center;
  max-width: 2000px;
  width: 100vw;
  z-index: 11;

  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin-left: auto;
  margin-top: 0;
  transition: transform 0.2s ease-in-out;
  @include media-breakpoint-up(sm) {
    padding-left: rem(20);
  }
}

.home-announcement__text {
  color: $white;
  font-family: $typeface-serif;
  font-size: rem(16);
  font-weight: 700;
  line-height: (26 / 16);
  padding-left: rem(24);
  @include media-breakpoint-up(sm) {
    padding-left: rem(17);
  }
  a {
    color: $iastate-gold;
    margin-left: rem(2);
    &:hover {
      color: $white;
    }
  }
}

.fa-iastate22-info-box,
.fa-iastate22-exclamation-point {
  flex: 0 0 auto;
  color: $iastate-gold;
  font-size: rem(30);
}
  • URL: /components/raw/home-announcement/_home-announcement.scss
  • Filesystem Path: src/components/home-announcement/_home-announcement.scss
  • Size: 890 Bytes

Home Announcement

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • Intended to display underneath the hero section of the homepage to alert users to various items/initiatives
  • Outputs an icon, along with intro copy and a link
  • The component will only display if an announcement is present
  • There are two variants, --alert and --info, the only difference being the icon used in the alert, --alert shows an exclamation point and --info shows a letter “i”
  • The custom styles are imported into the index.scss file as @import "../components/home-announcement/home-announcement";
  • There is no paragraph-widget wrapper needed for this component