Callout

Description

Highlight important information or alerts with a callout component.

PRO

This component is part of our professional component suite. See the installation instructions below for more on how to use it.

Arguments

Name	Default	Type	Description
`variant`		`String`	The variant of the callout. Options: `warning`, `info`, `danger`
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::CalloutComponent.new do %>
  <strong>This is a callout.</strong> Example text to show it in action.
<% end %>

<%= render Railsboot::CalloutComponent.new(variant: "info") do %>
  <strong>This is an info callout.</strong> Example text to show it in action.
<% end %>

<%= render Railsboot::CalloutComponent.new(variant: "warning") do %>
  <strong>This is an warning callout.</strong> Example text to show it in action.
<% end %>

<%= render Railsboot::CalloutComponent.new(variant: "danger") do %>
  <strong>This is an danger callout.</strong> Example text to show it in action.
<% end %>

<div class="callout">
  <strong>This is a callout.</strong> Example text to show it in action.
</div>
<div class="callout callout-info">
  <strong>This is an info callout.</strong> Example text to show it in action.
</div>
<div class="callout callout-warning">
  <strong>This is an warning callout.</strong> Example text to show it in action.
</div>
<div class="callout callout-danger">
  <strong>This is an danger callout.</strong> Example text to show it in action.
</div>

Icon

<%= render Railsboot::CalloutComponent.new do %>
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" />
        <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z" />
      </svg>
    </div>
    <div>
      <strong>This is a callout.</strong> Example text to show it in action.
    </div>
  </div>
<% end %>

<%= render Railsboot::CalloutComponent.new(variant: "info") do %>
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
      </svg>
    </div>
    <div>
      <strong>This is an info callout.</strong> Example text to show it in action.
    </div>
  </div>
<% end %>

<%= render Railsboot::CalloutComponent.new(variant: "warning") do %>
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z" />
        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
      </svg>
    </div>
    <div>
      <strong>This is an warning callout.</strong> Example text to show it in action.
    </div>
  </div>
<% end %>

<%= render Railsboot::CalloutComponent.new(variant: "danger") do %>
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1z" />
        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
      </svg>
    </div>
    <div>
      <strong>This is an danger callout.</strong> Example text to show it in action.
    </div>
  </div>
<% end %>

<div class="callout">
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" />
        <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z" />
      </svg>
    </div>
    <div>
      <strong>This is a callout.</strong> Example text to show it in action.
    </div>
  </div>
</div>
<div class="callout callout-info">
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
      </svg>
    </div>
    <div>
      <strong>This is an info callout.</strong> Example text to show it in action.
    </div>
  </div>
</div>
<div class="callout callout-warning">
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z" />
        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
      </svg>
    </div>
    <div>
      <strong>This is an warning callout.</strong> Example text to show it in action.
    </div>
  </div>
</div>
<div class="callout callout-danger">
  <div class="d-flex gap-3">
    <div class="flex-shrink-0">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1z" />
        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
      </svg>
    </div>
    <div>
      <strong>This is an danger callout.</strong> Example text to show it in action.
    </div>
  </div>
</div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/callout_component.rb).
A view template (app/components/railsboot/callout_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/callout_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Get access You need to purchase a professional license to download this component.

Button Group Card