-
Notifications
You must be signed in to change notification settings - Fork 64
/
_page-header.scss
71 lines (57 loc) · 1.01 KB
/
_page-header.scss
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
/*
Page Header
Page header is used for styling a the header of a page.
Markup:
<header class="page-header">
<div class="group">
<div class="hgroup">
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
</div>
<div class="service-info">
<h2>Service Information</h2>
<div class="service-info__help">
Service Information Help
</div>
</div>
</div>
</header>
Discussion: https://hmrcdigital.hackpad.com/Page-Header-dW8RzL03Cxa
Styleguide Page Header
*/
.page-header {
padding-bottom: 2em;
h1 {
margin-top: 30px;
@include media(tablet) {
@include bold-48;
}
}
h2 {
@include media(tablet) {
@include bold-36;
padding: 0;
}
}
.hgroup {
width: 64%;
float: left;
}
.service-info {
float: right;
width: 31%;
padding: 1em 0;
& > div {
padding-bottom: 1em;
}
}
.service-info__help {
float: right;
width: 31%;
@include core-16;
margin: 0;
}
.group {
clear: both;
}
}