<p>(This variant of the component is empty for fractal purposes - please see other variants)</p>
<p>(This variant of the component is empty for fractal purposes - please see other variants)</p>
{
"text": "Announcement Title Lorem Ipsum Dolor",
"link": {
"url": "#",
"text": "Read More"
}
}
.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);
}
This is a custom component (no class prefix in place as it does not conflict with bootstrap)
if an announcement is present--alert and --info, the only difference being the icon used in the alert, --alert shows an exclamation point and --info shows a letter “i”index.scss file as @import "../components/home-announcement/home-announcement";