Topic Image Tiles
Example
2-up
3-up
4-up
Institute for Advanced Vehicle Systems
Life at COB
Office of Research and Sponsored Programs
Behavioral and Biological Sciences
Code
<div class="topic-tiles">
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/201/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline maize">
<h2>Institute for Advanced Vehicle Systems</h2>
</div>
</a>
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/106/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline teal">
<h2>Life at COB</h2>
</div>
</a>
</div>
<br />
<p>3-up</p>
<div class="topic-tiles three-up">
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/200/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline purple">
<h2>Institute for Advanced Vehicle Systems</h2>
</div>
</a>
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/116/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-image-tile-headline orange">
<h2>Life at COB</h2>
</div>
</a>
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/115/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline red">
<h2>Teacher Academy</h2>
</div>
</a>
</div>
<br />
<p>4-up</p>
<div class="topic-tiles">
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/233/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline maize">
<h2>Institute for Advanced Vehicle Systems</h2>
</div>
</a>
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/666/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline teal">
<h2>Life at COB</h2>
</div>
</a>
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/700/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline red">
<h2>Office of Research and Sponsored Programs</h2>
</div>
</a>
<a class="topic-tile" href="#link">
<div class="topic-tile-image">
<img
src="https://picsum.photos/id/506/450/340"
class="image"
alt="card background"
/>
</div>
<div class="topic-tile-headline orange">
<h2>Behavioral and Biological Sciences</h2>
</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
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
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
CSS
.topic-tiles {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 1.125rem;
}
.topic-tiles .topic-tile {
background-color: #00274c;
-webkit-box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
color: #fafafa;
display: block;
margin-bottom: 1.875rem;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 48.25%;
}
.topic-tiles .topic-tile .topic-tile-image {
height: 339px;
overflow: hidden;
}
.topic-tiles .topic-tile .topic-tile-image .image {
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.topic-tiles .topic-tile .image {
-webkit-transform: scale(1);
transform: scale(1);
}
.topic-tiles .topic-tile:hover .image {
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
.topic-tiles .topic-tile-headline {
padding: 1.25rem;
position: relative;
}
.topic-tiles .topic-tile-headline:after {
content: '';
display: block;
position: absolute;
top: 0;
height: 5px;
left: 20px;
width: 150px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
z-index: 1;
}
.topic-tiles .topic-tile:hover .topic-tile-headline:after,
.topic-tiles .topic-tile:focus .topic-tile-headline:after {
left: 0;
width: 100%;
}
.topic-tiles .topic-tile .topic-tile-headline.maize:after {
background-color: #ffcb05;
}
.topic-tiles .topic-tile .topic-tile-headline.teal:after {
background-color: #00b4ae;
}
.topic-tiles .topic-tile .topic-tile-headline.purple:after {
background-color: #702082;
}
.topic-tiles .topic-tile .topic-tile-headline.red:after {
background-color: #9b301c;
}
.topic-tiles .topic-tile .topic-tile-headline.orange:after {
background-color: #ea691f;
}
.topic-tiles .topic-tile .topic-tile-headline.black:after {
background-color: #131516;
}
.topic-tiles .topic-tile .topic-tile-headline.white:after {
background-color: #fafafa;
}
.topic-tiles .topic-tile .topic-tile-headline h2 {
border: 0;
color: #fafafa;
font-family: Montserrat;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.19px;
margin: 0 0 0.625rem 0;
}
a.topic-tile:hover,
.theme-default-content:not(.custom) a.topic-tile:focus {
-webkit-box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 7px 8px -4px rgba(0, 0, 0, 0.2);
box-shadow: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 7px 8px -4px rgba(0, 0, 0, 0.2);
color: #ffcb05;
text-decoration: none;
}
.topic-tiles.single .topic-tile {
margin: 0 auto;
}
.topic-tiles.three-up .topic-tile {
width: 31%;
margin-right: 1rem;
}
.topic-tiles.three-up .topic-tile .topic-tile-image {
height: 219px;
}
.topic-tiles.three-up .topic-tile .topic-tile-headline h2 {
font-size: 1.125rem;
}
@media screen and (max-width: 39.9375em) {
.topic-tiles.three-up .topic-tile,
.topic-tiles .topic-tile {
width: 100%;
}
.topic-tiles.three-up .topic-tile .topic-tile-headline h2 {
font-size: 1.5rem;
}
.topic-tiles .topic-tile .topic-tile-image {
height: 219px;
}
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.topic-tiles.three-up .topic-tile {
width: 49%;
}
}
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
153
154
155
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
153
154
155
← Table Topic Tiles →