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'>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
  </div>
  <div class='gl-banner-content'>
    <h1 class='gl-banner-title'></h1>
    <p>This banner uses the illustration slot.</p>
    <a class="btn btn-md btn-confirm gl-button js-close-callout" href="#">OK</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
render(Pajamas::BannerComponent.new) do |c|
  c.with_illustration do
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>'.html_safe # rubocop:disable Layout/LineLength
  end
  content_tag :p, "This banner uses the illustration slot."
end

Use the illustration slot instead of svg_path if your illustration is not part or the asset pipeline, but for example, an inline SVG via custom_icon.

No params configured.