OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Full width -->
<div data-view-component="true" class="flash flash-full">
  This is a full width flash message!
</div>
<!-- Dismissible -->
<div data-view-component="true" class="flash">
  This is a dismissible flash message!
  <button id="icon-button-c277f13a-b563-4b82-ab81-219eb6287779" aria-labelledby="tooltip-2d79c23b-c2ae-49c6-996f-ca2cd8315bb2" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual">
      <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
    </svg>
  </button><tool-tip id="tooltip-2d79c23b-c2ae-49c6-996f-ca2cd8315bb2" for="icon-button-c277f13a-b563-4b82-ab81-219eb6287779" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip>
</div>
<!-- With icon -->
<div data-view-component="true" class="flash">
  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-info">
    <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
  </svg>This is a flash message with an icon!
</div>

No notes provided.

1
2
3
4
5
6
7
8
# Full width
render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" }
# Dismissible
render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" }
# With icon
render(Primer::Beta::Flash.new(icon: :info)) { "This is a flash message with an icon!" }

No params configured.