Getting Started
Components

Ribbon

Description

Highlight important information or alerts with a ribbon 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
position top-right String Position of the ribbon.
Options: top-left, top-right, bottom-left, bottom-right
fixed true Boolean Whether the ribbon should be fixed or not.
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<div class="border" style="height: 400px;">
  <div>
    <%= render Railsboot::RibbonComponent.new(position: "top-left", class: "bg-primary text-white").with_content("TOP-LEFT") %>
    <%= render Railsboot::RibbonComponent.new(position: "top-right", class: "bg-primary text-white").with_content("TOP-RIGHT") %>
    <%= render Railsboot::RibbonComponent.new(position: "bottom-right", class: "bg-primary text-white").with_content("BOTTOM-RIGHT") %>
    <%= render Railsboot::RibbonComponent.new(position: "bottom-left", class: "bg-primary text-white").with_content("BOTTOM-LEFT") %>
  </div>
</div>

<div class="border" style="height: 400px;">
  <div>
    <div class="ribbon ribbon--top-left bg-primary text-white">
      TOP-LEFT
    </div>
    <div class="ribbon ribbon--top-right bg-primary text-white">
      TOP-RIGHT
    </div>
    <div class="ribbon ribbon--bottom-right bg-primary text-white">
      BOTTOM-RIGHT
    </div>
    <div class="ribbon ribbon--bottom-left bg-primary text-white">
      BOTTOM-LEFT
    </div>
  </div>
</div>

Context 

<%= render Railsboot::CardComponent.new(class: "d-relative overflow-hidden", style: "max-width: 18rem;") do |card| %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" class="bd-placeholder-img card-img-top text-primary text-opacity-25 w-100 h-auto">
    <rect width="100%" height="100%" fill="currentColor" />
  </svg>
  <%= render Railsboot::RibbonComponent.new(position: "top-right", fixed: false, class: "bg-primary text-white").with_content("NEW") %>
  <% card.with_body do %>
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  <% end %>
<% end %>

<div style="max-width: 18rem;" class="card d-relative overflow-hidden">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" class="bd-placeholder-img card-img-top text-primary text-opacity-25 w-100 h-auto">
    <rect width="100%" height="100%" fill="currentColor" />
  </svg>
  <div class="ribbon ribbon--top-right ribbon--absolute bg-primary text-white">
    NEW
  </div>
  <div class="card-body">    
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </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/ribbon_component.rb).
  • A view template (app/components/railsboot/ribbon_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/ribbon_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.
Rating Group Pricing Panel