RPF Design System for Rails
x
1
2
3
4
5
6
7
8
9
10
11
12
<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">
    <div class="rpf-alert__text">
      <div class="rpf-markdown">
        <p>Example text for the markdown component.</p>
      </div>
    </div>
  </div>
</div>
1
2
3
render DesignSystem::AlertComponent.new(title:, type: 'success', text:) do
  render DesignSystem::MarkdownComponent.new(text:)
end

Alert Component with markdown passed through

This example shows how you can pass another component to render.

Example with a component passed as a block:

DesignSystem::AlertComponent.new(title: 'Action alert', type: 'information', text: 'Example text') do
  render DesignSystem::MarkdownComponent.new(text:)
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">
   <div class="rpf-alert__text">
     <div class="rpf-markdown"><p>Example text</p></div>
    </div>
  </div>
</div>
Param Description Input

Alert title - bold text at the top of the alert

Example text for the markdown component.