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-bell"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.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
render(Primer::Alpha::Banner.new) { "This is a banner." }
No notes provided.
No params configured.
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; } }