Office Contact
Example
See Kitchen Sink.
Code
HTML
<section class="office-contact">
<div class="grid-xxl">
<header>
<h1 class="contact-head">Office of Admissions and Orientation</h1>
<div class="social">
<ul>
<li>
<a aria-hidden="true" href="#">
<svg width="13" height="22" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 1H9a5 5 0 0 0-5 5v3H1v4h3v8h4v-8h3l1-4H8V6a1 1 0 0 1 1-1h3V1z"
fill="#00274C"
stroke="#00274C"
fill-rule="evenodd"
opacity=".8"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</li>
<li>
<a aria-hidden="true" href="#">
<svg width="26" height="21" xmlns="http://www.w3.org/2000/svg">
<path
d="M24 1.053a11.363 11.363 0 0 1-3.283 1.61 4.662 4.662 0 0 0-5.204-1.31A4.715 4.715 0 0 0 12.5 5.82v1.053a11.12 11.12 0 0 1-9.41-4.769S-1.09 11.58 8.319 15.79A12.109 12.109 0 0 1 1 17.895c9.41 5.263 20.91 0 20.91-12.106a4.768 4.768 0 0 0-.085-.873A8.14 8.14 0 0 0 24 1.053z"
fill="#00274C"
stroke="#00274C"
stroke-width="2.105"
fill-rule="evenodd"
opacity=".8"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
</li>
<li>
<a aria-hidden="true" href="#">
<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg">
<g
transform="translate(1 1)"
fill="none"
fill-rule="evenodd"
opacity=".8"
>
<rect
stroke="#00274C"
stroke-width="2"
fill="#00274C"
stroke-linecap="round"
stroke-linejoin="round"
width="20"
height="20"
rx="5"
/>
<path
d="M14 9.37a4 4 0 1 1-7.913 1.173A4 4 0 0 1 14 9.37z"
stroke="#FAFAFA"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle
stroke="#FAFAFA"
fill="#FAFAFA"
cx="15.5"
cy="4.5"
r="1"
/>
</g>
</svg>
</a>
</li>
<li>
<a aria-hidden="true" href="#">
<svg width="30" height="22" xmlns="http://www.w3.org/2000/svg">
<g
transform="translate(1 1)"
stroke-width="2"
fill="none"
fill-rule="evenodd"
opacity=".8"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M27.42 3.025a3.489 3.489 0 0 0-2.446-2.5C22.805 0 14.13 0 14.13 0S5.456 0 3.287.575a3.489 3.489 0 0 0-2.446 2.5 35.946 35.946 0 0 0-.58 6.612c-.014 2.234.18 4.465.58 6.663a3.49 3.49 0 0 0 2.446 2.4c2.169.575 10.843.575 10.843.575s8.675 0 10.844-.575a3.489 3.489 0 0 0 2.446-2.5c.394-2.166.588-4.362.58-6.563a35.946 35.946 0 0 0-.58-6.662z"
stroke="#00274C"
fill="#00274C"
/>
<path
stroke="#FAFAFA"
fill="#FAFAFA"
d="M11.2934783 13.775L18.5434783 9.6875 11.2934783 5.6z"
/>
</g>
</svg>
</a>
</li>
</ul>
</div>
</header>
<div class="contacts">
<div class="contact-item">
<div class="icon">
<img
src="/icons/location-2.svg"
aria-hidden="true"
alt="location icon"
/>
</div>
<div class="label">1145 - University Centre (UC)</div>
</div>
<div class="contact-item">
<div class="icon">
<img
src="/icons/telephone.svg"
aria-hidden="true"
alt="telephone icon"
/>
</div>
<div class="label">
Phone: 313-593-5100
<br />Fax: 313-436-9167
</div>
</div>
<div class="contact-item">
<div class="icon">
<img src="/icons/mail.svg" aria-hidden="true" alt="mail icon" />
</div>
<div class="label">
<a href="mailto:umd-admissions@umich.edu">umd-admissions@umich.edu</a>
</div>
</div>
<div class="contact-item">
<div class="icon">
<img src="/icons/time-2.svg" aria-hidden="true" alt="time icon" />
</div>
<div class="label">
<details>
<summary>
Office Hours
<div class="current-day">
Wednesday 9 a.m.–5 p.m.
<svg width="17" height="9" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.993.375a1.441 1.441 0 0 0-1.997 0L8.499 5.71 3.002.375a1.441 1.441 0 0 0-1.997 0 1.341 1.341 0 0 0 0 1.939l6.502 6.311a1.441 1.441 0 0 0 1.998 0l6.502-6.311a1.353 1.353 0 0 0-.014-1.939z"
fill="#131516"
/>
</svg>
</div>
</summary>
<div>Thursday 8 a.m.–6 p.m.</div>
<div>Friday 8 a.m.–4 p.m.</div>
<div>Saturday 9 a.m.–12 p.m.</div>
<div>Sunday Closed</div>
<div>Monday 9 a.m.–5 p.m.</div>
<div>Tuesday 9 a.m.–5 p.m.</div>
</details>
</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
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
156
157
158
159
160
161
162
163
164
165
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
156
157
158
159
160
161
162
163
164
165
CSS
.office-contact {
background-color: #fafafa;
border-bottom: 2px solid #e5e9ef;
border-top: 2px solid #e5e9ef;
padding: 5.625rem 0;
}
.office-contact header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 3.125rem;
width: 100%;
}
@media screen and (max-width: 39.9375em) {
.office-contact header {
display: block;
}
}
.office-contact header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 1.875rem;
font-weight: 700;
color: rgba(0, 0, 0, 0.87);
letter-spacing: 0.23px;
margin: 0;
padding-right: 2.5rem;
text-align: left;
}
@media screen and (max-width: 39.9375em) {
.office-contact header h1 {
margin-bottom: 2rem;
padding-right: 0;
}
}
.office-contact .social ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.office-contact .social ul li {
margin-right: 1.25rem;
}
.office-contact .social ul li:last-child {
margin-right: 0;
}
.office-contact .social ul a path,
.office-contact .social ul a stroke,
.office-contact .social ul a rect,
.office-contact .social ul a g {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.office-contact .social ul a:hover path,
.office-contact .social ul a:hover stroke,
.office-contact .social ul a:hover rect {
fill: #131516;
opacity: 1;
}
.office-contact .social ul a:hover g {
opacity: 1;
}
.office-contact .contacts {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
@media screen and (max-width: 39.9375em) {
.office-contact .contacts {
display: block;
}
}
.office-contact .contacts .contact-item {
color: rgba(0, 0, 0, 0.87);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: 'Open Sans', sans-serif;
font-size: 1.125rem;
font-weight: 700;
text-align: left;
line-height: 24px;
width: 33.3333%;
}
@media screen and (max-width: 39.9375em) {
.office-contact .contacts .contact-item {
margin-bottom: 1.75rem;
width: 100%;
}
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.office-contact .contacts .contact-item {
margin-bottom: 1.75rem;
width: 50%;
}
}
.office-contact .contacts .contact-item .icon {
margin-right: 1rem;
}
.office-contact .contacts .contact-item a {
color: rgba(0, 0, 0, 0.87);
}
.office-contact .contacts .contact-item a:hover {
text-decoration: underline;
}
.office-contact .contacts details > summary {
cursor: pointer;
}
.office-contact .contacts details > summary::-webkit-details-marker {
display: none;
}
.office-contact .contacts details > summary svg {
-webkit-transition: 200ms linear all;
transition: 200ms linear all;
}
.office-contact .contacts details[open] > summary svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
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
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
← News List Pagination →