Pajamas ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<section class='gl-banner'>
  <div class='gl-banner-illustration'>
    <img alt="" src="/assets/illustrations/autodevops-f7365a8d9ffad26f12c96db0b0a2c588ba934cd9aa669b37907c44bd6939e9df.svg" />
  </div>
  <div class='gl-banner-content'>
    <h1 class='gl-banner-title'></h1>
    <p>Add your message here.</p>
    <a class="btn btn-md btn-confirm gl-button js-close-callout" href="https://about.gitlab.com/">Learn more</a>
  </div>
  <button class='gl-button gl-banner-close btn-sm btn-icon js-close btn-default btn-default-tertiary' type='button'>
    <svg class="s16 dismiss-icon" data-testid="close-icon"><use href="/assets/icons-be8ca3b37e0f9a5adb0ee8b20a3ae0e568a9b5ac85539f8eaa965b6f7b4b38a1.svg#close"></use></svg>
  </button>
</section>
1
2
3
4
5
6
7
8
9
render(Pajamas::BannerComponent.new(
         button_text: button_text,
         button_link: button_link,
         embedded: embedded,
         svg_path: "illustrations/autodevops.svg",
         variant: variant
       )) do |c|
  content_tag :p, content
end

Banner

See its design reference here.

Param Description Input

—

—

—

—

—