Styleguide

Home Carousel

Example


See Kitchen Sink.

Code

HTML

<section class="home-carousel">
  <div class="carousel-wrapper">
    <div class="main-carousel full" data-flickity='{ "adaptiveHeight": true }'>
      <div class="item">
        <div class="image">
          <img
            src="https://umdearborn.edu/sites/default/files/styles/hero_carousel_desktop/public/group-library/341/heromedicalschool.jpg?itok=MWYP1TJ-&timestamp=1559222735"
            alt="alt text"
          />
        </div>
        <div class="text-overlay">
          <h2>Connecting the Docs</h2>
          <p>
            The UM-Dearborn Pre-Med Alumni Mentoring Program connects our grads
            in medical schools around the nation to undergrads who want to
            become healthcare professionals.
          </p>
          <p>
            <a href="#" tabindex="0"><span>How it works</span></a>
          </p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img
            src="https://umdearborn.edu/sites/default/files/styles/hero_carousel_desktop/public/group-library/341/globalexpansion_hero.jpg?itok=DxFX5ZHI&timestamp=1561987068"
            alt="alt text"
          />
        </div>
        <div class="text-overlay">
          <h2>Global expansion</h2>
          <p>
            An international collaboration gave African entrepreneurs advice and
            UM-Dearborn students a new business perspective.
          </p>
          <p>
            <a href="#" tabindex="0"><span>Why It Matters</span></a>
          </p>
        </div>
      </div>
      <div class="item">
        <div class="image">
          <img
            src="https://umdearborn.edu/sites/default/files/styles/hero_carousel_desktop/public/group-library/341/auto.homepage.jpg?itok=aCkdfNJv&timestamp=1567691293"
            alt="alt text"
          />
        </div>
        <div class="text-overlay">
          <h2>A doctorate built for the auto industry</h2>
          <p>
            Balancing full-time work with part-time doctoral studies could
            become more doable with a new graduate program.
          </p>
          <p>
            <a href="#" tabindex="0"><span>Learn more</span></a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
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

CSS

.home-carousel .carousel-wrapper .flickity-page-dots {
  bottom: 1.875rem;
  z-index: 1;
}
.home-carousel .carousel-wrapper .flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid #ffcb05;
}
.home-carousel .carousel-wrapper .flickity-page-dots .dot.is-selected {
  background: #9b301c;
  border: 2px solid #9b301c;
}
.home-carousel .main-carousel .item {
  height: 42rem;
  position: relative;
}
@media screen and (max-width: 39.9375em) {
  .home-carousel .main-carousel .item {
    height: 100%;
    min-height: 26.875rem;
  }
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .home-carousel .main-carousel .item {
    height: 100%;
    min-height: 35rem;
  }
}
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  .home-carousel .main-carousel .item {
    height: 36.875rem;
  }
}
@media screen and (min-width: 1366px) {
  .home-carousel .main-carousel .item {
    height: 33.375rem;
  }
}
@media screen and (min-width: 1440px) {
  .home-carousel .main-carousel .item {
    height: 35.1875rem;
  }
}
.home-carousel .main-carousel .item img {
  height: 100%;
  max-height: none;
  width: 100%;
}
.home-carousel .main-carousel .text-overlay {
  background-color: rgba(0, 39, 76, 0.8);
  bottom: 5rem;
  color: #fafafa;
  left: 25%;
  padding: 1rem 1.875rem;
  position: absolute;
  max-width: 31.875rem;
}
@media screen and (max-width: 39.9375em) {
  .home-carousel .main-carousel .text-overlay {
    background-color: #00274c;
    position: static;
    max-width: none;
    min-height: 15.625rem;
  }
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .home-carousel .main-carousel .text-overlay {
    background-color: #00274c;
    position: static;
    max-width: none;
    min-height: 15.625rem;
  }
}
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  .home-carousel .main-carousel .text-overlay {
    background-color: #00274c;
    position: static;
    max-width: none;
  }
}
.home-carousel .main-carousel .text-overlay h2 {
  border: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 0.625rem;
  margin-top: 0;
  padding: 0;
  text-align: left;
}
@media screen and (max-width: 39.9375em) {
  .home-carousel .main-carousel .text-overlay h2 {
    font-size: 1.5rem;
  }
}
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  .home-carousel .main-carousel .text-overlay h2 {
    font-size: 1.5rem;
    margin: 0 auto;
    max-width: 750px;
  }
}
.home-carousel .main-carousel .text-overlay p {
  border-bottom: 0;
  color: #fafafa;
  font-size: 1.125rem;
  letter-spacing: 0.25px;
  padding-bottom: 0;
}
@media screen and (max-width: 39.9375em) {
  .home-carousel .main-carousel .text-overlay p {
    font-size: 1rem;
  }
}
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  .home-carousel .main-carousel .text-overlay p {
    font-size: 1rem;
  }
}
.home-carousel .main-carousel .text-overlay p + p {
  margin-bottom: 0;
}
.home-carousel .main-carousel .text-overlay p a {
  color: #ffcb05;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 1.79px;
  line-height: 16px;
  text-transform: uppercase;
}
@media screen and (max-width: 39.9375em) {
  .home-carousel .main-carousel .text-overlay p a {
    font-size: 1rem;
  }
}
@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  .home-carousel .main-carousel .text-overlay p a {
    font-size: 1rem;
  }
}
@media screen and (max-width: 39.9375em) {
  .home-carousel .main-carousel .flickity-prev-next-button {
    height: 25px;
    width: 25px;
  }
}
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

← Image Carousel →