x
1
2
3
4
5
6
7
8
9
10
11
12
<x-banner data-dismiss-scheme="none" data-view-component="true"> <div data-view-component="true" class="Banner flash"> <div class="Banner-visual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </div> <div data-view-component="true" class="Banner-message"> <p class="Banner-title" data-target="x-banner.titleText">This is a banner!</p> </div> </div></x-banner>
1
2
icon = nil if icon == :nonerender(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
No notes provided.
Param | Description | Input |
---|---|---|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
|
— |
|
app/components/primer/alpha/banner.css
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
/* Banner alert */.Banner { position: relative; display: grid; padding: var(--base-size-8,0.5rem); color: var(--fgColor-default,var(--color-fg-default)); background-image: linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)), var(--bgColor-accent-muted,var(--color-accent-subtle))); border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted)); border-radius: var(--borderRadius-medium,0.375rem); grid-auto-flow: column; grid-template-areas: 'visual message actions close'; grid-template-columns: min-content 1fr minmax(0, auto) min-content; grid-template-rows: min-content; /* `sm` breakpoint variantion */}@media (max-width: 543.98px) {.Banner { grid-template-areas: 'visual message close' '. actions actions'; grid-template-columns: min-content 1fr min-content; grid-template-rows: min-content min-content;} .Banner .Banner-actions { margin: var(--base-size-8,0.5rem) 0 0 var(--base-size-8,0.5rem); } }/* Elements */.Banner .Banner-visual { display: grid; padding: 0.375rem var(--base-size-8,0.5rem); grid-area: visual; align-self: start; }.Banner .Banner-visual > .octicon { margin-block: calc(var(--base-size-4,0.25rem) / 2); }.Banner .Banner-visual > * { align-self: center; }.Banner .Banner-message { padding: 0.375rem var(--base-size-8,0.5rem); grid-area: message; align-self: center; }.Banner .Banner-message p:last-child { margin-bottom: 0; }.Banner .Banner-message .Banner-title:not(:only-child) { margin-bottom: 0; font-weight: var(--base-text-weight-semibold,600); }.Banner .Banner-actions { grid-area: actions; }.Banner .Banner-actions:last-child { align-self: center; }/* is this used anywhere? could not find any use, but unsure */.Banner .Banner-close { grid-area: close; margin-left: var(--controlStack-medium-gap-condensed,0.5rem); }.Banner .Banner-visual .octicon { color: var(--fgColor-accent,var(--color-accent-fg)); }.Banner.Banner--warning { color: var(--fgColor-default,var(--color-fg-default)); background-image: linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)), var(--bgColor-attention-muted,var(--color-attention-subtle))); border-color: var(--borderColor-attention-muted,var(--color-attention-muted)); }.Banner.Banner--warning .Banner-visual .octicon { color: var(--fgColor-attention,var(--color-attention-fg)); }.Banner.Banner--error { color: var(--fgColor-default,var(--color-fg-default)); background-image: linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)), var(--bgColor-danger-muted,var(--color-danger-subtle))); border-color: var(--borderColor-danger-muted,var(--color-danger-muted)); }.Banner.Banner--error .Banner-visual .octicon { color: var(--fgColor-danger,var(--color-danger-fg)); }.Banner.Banner--success { color: var(--fgColor-default,var(--color-fg-default)); background-image: linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)), var(--bgColor-success-muted,var(--color-success-subtle))); border-color: var(--borderColor-success-muted,var(--color-success-muted)); }.Banner.Banner--success .Banner-visual .octicon { color: var(--fgColor-success,var(--color-success-fg)); }/* Full-width */.Banner.Banner--full { margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1); border-right: 0; border-left: 0; border-radius: 0; }@media (max-width: 767.98px) { .Banner.Banner--full-whenNarrow { margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1); border-right: 0; border-left: 0; border-radius: 0; } }