RPF Design System for Rails
x
1
2
3
4
5
6
7
8
<div class="rpf-alert rpf-alert--success">
  <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
    <h3 class="rpf-alert__title">Block content alert</h3>
  </div>
  <div class="rpf-alert__body">
    <p>This is custom content inside the alert body.</p>
  </div>
</div>
1
2
3
4
)
  render DesignSystem::AlertComponent.new(title:, type: 'success') do
    block_content.html_safe
  end

Alert Component with custom block content

This example shows how you can pass a block to render custom content inside the alert body.

Example with block passed through:

DesignSystem::AlertComponent.new(title: 'Action alert', type: 'information') do
  tag.p('This is custom content inside the alert body.')
end

Produces:

<div class="rpf-alert rpf-alert--aye rpf-alert--information">
  <div class="rpf-alert__header"><span class="rpf-alert__icon material-symbols-sharp"></span>
    <h3 class="rpf-alert__title">Action alert</h3>
  </div>
  <div class="rpf-alert__body">
    <p>This is custom content inside the alert body.</p>
  </div>
</div>
Param Description Input

Alert title - bold text at the top of the alert

Custom content for the alert body