x
1
2
3
4
5
6
7
8
<div class="relative flex gap-4 rounded-lg p-4 bg-primary/10 border border-primary/20 text-foreground" data-controller="ui--banner" data-slot="banner"> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold mb-1">Try our new pipeline editor</h4> <div class="mt-3"><a href='#' class='inline-flex items-center text-sm font-medium text-primary hover:underline'>Learn more</a></div> </div> <button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent disabled:bg-transparent! h-7 w-7 disabled:cursor-not-allowed absolute top-3 right-3 text-muted-foreground hover:text-foreground" aria-label="Dismiss" data-action="click->ui--banner#dismiss"><i data-lucide="x" class="inline-block shrink-0 w-3 h-3" aria-hidden="true"></i> </button></div>1
2
3
4
5
6
7
render(UI::Banner.new(variant: variant.to_sym, dismissible: dismissible)) do |banner| banner.with_title { "Try our new pipeline editor" } "Visualize and edit your CI/CD pipelines with an interactive drag-and-drop editor. No YAML required." banner.with_action do "<a href='#' class='inline-flex items-center text-sm font-medium text-primary hover:underline'>Learn more</a>".html_safe endendNo notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|