Callouts (Cards) UI component in Rails

Callouts

The callout (a.k.a. 'card') component provides an element that you can use to call out important information to your users by displaying a box with consistent styling.

Demos

Preview

Code

A simple callout with some important information that you should pay attention to.

Copy

<%= render "shared/components/callout" do %>
  A simple callout with some important information that you should pay attention to.
<% end %>

Simple callout

Preview

Code

This is a headline

Here's a more substantial callout with more information, along with a headline and a button. You should probably click it.

Click here

Copy

<%= render "shared/components/callout",
            headline_text: "This is a headline",
            link_path: "#",
            button_text: "Click here",
            button_icon: "arrow-right",
            button_icon_position: "after" do %>
  Here's a more substantial callout with more information, along with a headline and a button.  You should probably click it.
<% end %>

Callout with headline & button

Preview

Code

This is a headline

Here's a more substantial callout with more information, along with a headline and a button. You should probably click it.

Click here

Copy

<%= render "shared/components/callout",
            headline_text: "This is a headline",
            link_path: "#",
            button_text: "Click here",
            button_icon: "arrow-right",
            button_icon_position: "after",
            icon_name: "rocket" do %>
  Here's a more substantial callout with more information, along with a headline and a button.  You should probably click it.
<% end %>

Callout with icon

Preview

Code

Linked callout

The entire callout is wrapped in a link so that the entire callout is clickable.

Click here

Copy

<%= render "shared/components/callout",
            headline_text: "Linked callout",
            link_container: true,
            link_path: "#",
            button_text: "Click here",
            button_icon: "arrow-right",
            button_icon_position: "after",
            icon_name: "rocket" do %>
  The entire callout is wrapped in a link so that the entire callout is clickable.
<% end %>

Entire callout is linked

Installation

Copy

rails g instrumental:callout

To insert a component into a view:

Copy

rails g instrumental:callout:insert

Customization

Find all of your customization options (via local variables) in this file:

app/views/shared/components/_callout.html.erb

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel

Creator of Instrumental Components

Learn more Send me a question or request