Divider

Description

Flexible divider for organizing content.

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
`color`	`secondary-subtle`	`String`	Change the border color using utilities theme colors.
`size`	`1`	`Integer`	The size of the component. Options: `1`, `2`, `3`, `4`, `5`, `6`
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<div class="d-flex flex-column">
  <%= render Railsboot::DividerComponent.new(color: "primary") %>
  <%= render Railsboot::DividerComponent.new(color: "secondary-subtle", size: 2) %>
  <%= render Railsboot::DividerComponent.new(color: "dark-subtle", size: 3) %>
  <%= render Railsboot::DividerComponent.new(color: "warning", size: 4) %>
</div>

<div class="d-flex flex-column">
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-secondary-subtle border border-1 border-secondary-subtle">
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-dark-subtle border border-2 border-dark-subtle">
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-warning border border-3 border-warning">
  </div>
</div>

With label

<div class="d-flex flex-column gap-4">
  <%= render Railsboot::DividerComponent.new(color: "primary") do %>
    <span class="position-absolute top-50 start-50 translate-middle text-primary bg-body px-2">OR</span>
  <% end %>
  <%= render Railsboot::DividerComponent.new(color: "black-50") do %>
    <span class="position-absolute top-50 start-50 translate-middle text-black-50 bg-body px-2">Continue</span>
  <% end %>
  <%= render Railsboot::DividerComponent.new(color: "black", size: 2) do %>
    <span class="position-absolute top-50 start-0 translate-middle-y text-black bg-body pe-2 fw-bold">Projects</span>
  <% end %>
  <%= render Railsboot::DividerComponent.new(color: "black", size: 2) do %>
    <span class="position-absolute top-50 end-0 translate-middle-y text-black bg-body ps-2 fw-bold">End</span>
  <% end %>
</div>

<div class="d-flex flex-column gap-4">
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
    <span class="position-absolute top-50 start-50 translate-middle text-primary bg-body px-2">OR</span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-black-50">
    <span class="position-absolute top-50 start-50 translate-middle text-black-50 bg-body px-2">Continue</span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-black border border-1 border-black">
    <span class="position-absolute top-50 start-0 translate-middle-y text-black bg-body pe-2 fw-bold">Projects</span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-black border border-1 border-black">
    <span class="position-absolute top-50 end-0 translate-middle-y text-black bg-body ps-2 fw-bold">End</span>
  </div>
</div>

With icon

<div class="d-flex flex-column gap-4">
  <%= render Railsboot::DividerComponent.new(color: "primary") do %>
    <span class="position-absolute top-50 start-0 translate-middle-y text-primary bg-body pe-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z" />
      </svg>
    </span>
  <% end %>

  <%= render Railsboot::DividerComponent.new(color: "primary") do %>
    <span class="position-absolute top-50 start-50 translate-middle text-primary bg-body px-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.646 6.24v.07H5.375v-.064c0-1.213.879-2.402 2.637-2.402 1.582 0 2.613.949 2.613 2.215 0 1.002-.6 1.667-1.287 2.43l-.096.107-1.974 2.22v.077h3.498V12H5.422v-.832l2.97-3.293c.434-.475.903-1.008.903-1.705 0-.744-.557-1.236-1.313-1.236-.843 0-1.336.615-1.336 1.306" />
      </svg>
    </span>
  <% end %>

  <%= render Railsboot::DividerComponent.new(color: "primary") do %>
    <span class="position-absolute top-50 end-0 translate-middle-y text-primary bg-body ps-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M7.918 8.414h-.879V7.342h.838c.78 0 1.348-.522 1.342-1.237 0-.709-.563-1.195-1.348-1.195-.79 0-1.312.498-1.348 1.055H5.275c.036-1.137.95-2.115 2.625-2.121 1.594-.012 2.608.885 2.637 2.062.023 1.137-.885 1.776-1.482 1.875v.07c.703.07 1.71.64 1.734 1.917.024 1.459-1.277 2.396-2.93 2.396-1.705 0-2.707-.967-2.754-2.144H6.33c.059.597.68 1.06 1.541 1.066.973.006 1.6-.563 1.588-1.354-.006-.779-.621-1.318-1.541-1.318" />
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8" />
      </svg>
    </span>
  <% end %>
</div>

<div class="d-flex flex-column gap-4">
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
    <span class="position-absolute top-50 start-0 translate-middle-y text-primary bg-body pe-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383z" />
      </svg>
    </span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
    <span class="position-absolute top-50 start-50 translate-middle text-primary bg-body px-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.646 6.24v.07H5.375v-.064c0-1.213.879-2.402 2.637-2.402 1.582 0 2.613.949 2.613 2.215 0 1.002-.6 1.667-1.287 2.43l-.096.107-1.974 2.22v.077h3.498V12H5.422v-.832l2.97-3.293c.434-.475.903-1.008.903-1.705 0-.744-.557-1.236-1.313-1.236-.843 0-1.336.615-1.336 1.306" />
      </svg>
    </span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
    <span class="position-absolute top-50 end-0 translate-middle-y text-primary bg-body ps-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path d="M7.918 8.414h-.879V7.342h.838c.78 0 1.348-.522 1.342-1.237 0-.709-.563-1.195-1.348-1.195-.79 0-1.312.498-1.348 1.055H5.275c.036-1.137.95-2.115 2.625-2.121 1.594-.012 2.608.885 2.637 2.062.023 1.137-.885 1.776-1.482 1.875v.07c.703.07 1.71.64 1.734 1.917.024 1.459-1.277 2.396-2.93 2.396-1.705 0-2.707-.967-2.754-2.144H6.33c.059.597.68 1.06 1.541 1.066.973.006 1.6-.563 1.588-1.354-.006-.779-.621-1.318-1.541-1.318" />
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8" />
      </svg>
    </span>
  </div>
</div>

With button

<div class="d-flex flex-column gap-4">
  <%= render Railsboot::DividerComponent.new(color: "primary") do %>
    <span class="position-absolute top-50 start-50 translate-middle bg-body">
      <%= render Railsboot::ButtonComponent.new(variant: "primary", outline: true, size: "sm", class: "rounded-pill rounded-pill d-flex align-items-center gap-1") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
        </svg>
        <span>Button</span>
      <% end %>
    </span>
  <% end %>

  <%= render Railsboot::DividerComponent.new(color: "secondary", size: 1) do %>
    <span class="position-absolute top-50 start-0 translate-middle-y text-black bg-body pe-2 fw-bold">Projects</span>
    <span class="position-absolute top-50 end-0 translate-middle-y bg-body">
      <%= render Railsboot::ButtonComponent.new(variant: "secondary", outline: true, size: "sm", class: "rounded-pill d-flex align-items-center gap-1") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
        </svg>
        <span>Button</span>
      <% end %>
    </span>
  <% end %>

  <%= render Railsboot::DividerComponent.new(color: "primary", size: 1) do %>
    <%= render Railsboot::ButtonGroupComponent.new(aria_label: "Outline Styles Example", class: "position-absolute top-50 start-50 translate-middle bg-body") do %>
      <%= render Railsboot::ButtonComponent.new(outline: true, class: "rounded-start-pill d-flex align-items-center") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001" />
        </svg>
      <% end %>
      <%= render Railsboot::ButtonComponent.new(outline: true, class: "d-flex align-items-center") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
        </svg>
      <% end %>
      <%= render Railsboot::ButtonComponent.new(outline: true, class: "rounded-end-pill d-flex align-items-center") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
        </svg>
      <% end %>
    <% end %>
  <% end %>
</div>

<div class="d-flex flex-column gap-4">
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
    <span class="position-absolute top-50 start-50 translate-middle bg-body">
      <button type="button" class="btn btn-outline-primary btn-sm rounded-pill d-flex align-items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
        </svg>
        <span>Button</span>
      </button>
    </span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-secondary">
    <span class="position-absolute top-50 start-0 translate-middle-y text-black bg-body pe-2 fw-bold">Projects</span>
    <span class="position-absolute top-50 end-0 translate-middle-y bg-body">
      <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill d-flex align-items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
        </svg>
        <span>Button</span>
      </button>
    </span>
  </div>
  <div class="w-100 position-relative">
    <hr class="opacity-100 text-primary">
    <div class="btn-group position-absolute top-50 start-50 translate-middle bg-body" role="group" aria-label="Outline Styles Example">
      <button type="button" class="btn btn-outline-primary rounded-start-pill d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001" />
        </svg>
      </button>
      <button type="button" class="btn btn-outline-primary d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
        </svg>
      </button>
      <button type="button" class="btn btn-outline-primary rounded-end-pill d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
        </svg>
      </button>
    </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/divider_component.rb).
A view template (app/components/railsboot/divider_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/divider_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.

Copy to Clipboard Dropdown