Styleguide

News Carousel

Example


image alt
6/19/2019

CEHHS Alum named Teacher of the Year

Erica Sowders received the Clarenceville Teacher of the ...
 image alt
6/19/2019

Lecturer Amira Shourbaji is the latest UM-Dearborn faculty member to land a Fulbright

The English language proficiency instructor is used to helping …
 image alt
6/19/2019

CEHHS graduate Kori Schmidt received the Chancellor's Medallion Award

Kori Schmidt was recognized as Chancellor’s Medallion ...

Code

HTML

<div class="news-carousel">
    <a class="card" href="#">
      <img src="https://picsum.photos/id/99/290/152" class="card-image" alt="image alt" />
        <div class="card-details">
            <div class="news-overline">6/19/2019</div>
            <h2 class="news-headline">CEHHS Alum named Teacher of the Year</h2>
            <div class="news-dek">Erica Sowders received the Clarenceville Teacher of the ...</div>
        </div>
    </a>
    <a class="card" href="#">
      <img src="https://picsum.photos/id/42/290/152" class="card-image" alt="image alt" />
        <div class="card-details">
            <div class="news-overline">6/19/2019</div>
            <h2 class="news-headline">Lecturer Amira Shourbaji is the latest UM-Dearborn faculty member to land a Fulbright</h2>
            <div class="news-dek">The English language proficiency instructor is used to helping …</div>
        </div>
    </a>
    <a class="card" href="#">
      <img src="https://picsum.photos/id/1020/290/152" class="card-image" alt="image alt" />
        <div class="card-details">
            <div class="news-overline">6/19/2019</div>
            <h2 class="news-headline">CEHHS graduate Kori Schmidt received the Chancellor's Medallion Award</h2>
            <div class="news-dek">Kori Schmidt was recognized as Chancellor’s Medallion ...</div>
        </div>
    </a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

CSS

.news-carousel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.news-carousel a.card {
  background-color: #ffffff;
  box-shadow: 1px 1px 0 0 rgba(0,0,0,0.10);
  color: #131516;
  cursor: pointer;
  display: block;
  margin-bottom: 1.875rem;
  max-width: 18.125rem;
  transition: all .2s ease;
}
.news-carousel a.card:hover,
.news-carousel a.card:focus {
  box-shadow: 0 9px 12px 1px rgba(0,0,0,0.14), 0 3px 16px 2px rgba(0,0,0,0.12), 0 5px 6px -3px rgba(0,0,0,0.20);
  color: #1c5184;
  text-decoration: none;
}
.news-carousel a.card:hover .card-head,
.news-carousel a.card:focus .card-head {
  color: #1c5184;
}
.news-carousel .news-overline {
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 3.5px;
  color: rgba(0, 39, 76, 0.9);
}
.news-carousel .news-headline {
  border: 0;
  margin: 0 0 .625rem 0;  
}
.news-carousel .news-headline {
  color: rgba(0, 0, 0, 0.87);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.25;
  letter-spacing: .19px;
  transition: all .2s ease;
}

.news-carousel .card-image {
  width: 100%;
}
.news-carousel .card-head {
  border: 0;
  color: rgba(0, 0, 0, 0.87);
  font-family: Montserrat;
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: .26px;
  margin: 0 0 1rem;
}
.news-carousel .card-details {
  padding: 1rem;
}
.news-carousel .card-details p {
  color: rgba(0, 0, 0, 0.87);
}
@media screen and (max-width: 39.9375em) {
  .news-carousel {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .news-carousel a.card {
    flex: 0 0 auto;
    margin-right: 1.125rem;
    max-width: 88%;
    width: 100%;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

← News Carousel Full Width →