Getting Started
Components

Feed

Description

Display a feed of activities or updates in a social media-like format.

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
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<div style="max-width: 32rem;">
  <%= render Railsboot::FeedComponent.new do |feed| %>
    <% feed.with_item do |item| %>
      <% item.with_icon(class: "bg-secondary text-white") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
          <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
        </svg>
      <% end %>
      <% item.with_text do %>
        Applied to <strong class="text-black">Front End Developer</strong>
      <% end %>
      <% item.with_time(datetime: "2020-09-20", text: "Sep 20") %>
    <% end %>
    <% feed.with_item do |item| %>
      <% item.with_icon(class: "bg-primary text-white") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-up-fill" viewBox="0 0 16 16">
          <path d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a10 10 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733q.086.18.138.363c.077.27.113.567.113.856s-.036.586-.113.856c-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.2 3.2 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.8 4.8 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z" />
        </svg>
      <% end %>
      <% item.with_text do %>
        Advanced to phone screening by <strong class="text-black">Bethany Blake</strong>
      <% end %>
      <% item.with_time(datetime: "2020-09-22", text: "Sep 22") %>
    <% end %>
    <% feed.with_item do |item| %>
      <% item.with_icon(class: "bg-success text-white") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0" />
        </svg>
      <% end %>
      <% item.with_text do %>
        Completed phone screening with <strong class="text-black">Martha Gardner</strong>
      <% end %>
      <% item.with_time(datetime: "2020-09-28", text: "Sep 28") %>
    <% end %>
    <% feed.with_item do |item| %>
      <% item.with_icon(class: "bg-primary text-white") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-up-fill" viewBox="0 0 16 16">
          <path d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a10 10 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733q.086.18.138.363c.077.27.113.567.113.856s-.036.586-.113.856c-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.2 3.2 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.8 4.8 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z" />
        </svg>
      <% end %>
      <% item.with_text do %>
        Advanced to interview by <strong class="text-black">Bethany Blake</strong>
      <% end %>
      <% item.with_time(datetime: "2020-09-30", text: "Sep 30") %>
    <% end %>
    <% feed.with_item do |item| %>
      <% item.with_icon(class: "bg-success text-white") do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0" />
        </svg>
      <% end %>
      <% item.with_text do %>
        Completed interview with <strong class="text-black">Katherine Snyder</strong>
      <% end %>
      <% item.with_time(datetime: "2020-10-04", text: "Oct 4") %>
    <% end %>
  <% end %>
</div>

<div style="max-width: 32rem;">
  <div class="position-relative">
    <span class="position-absolute top-0 bottom-0 bg-secondary-subtle" style="width: 2px; transform: translateX(17px);" aria-hidden="true"></span>
    <ul role="list" class="list-unstyled d-flex flex-column gap-5 m-0">
      <li class="d-flex align-items-center gap-3 text-secondary">
        <div class="flex-shrink-0 z-0 bg-body pb-2">
          <div class="d-inline-flex p-2 rounded-circle bg-secondary text-white">        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
              <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
            </svg>
          </div>
        </div>
        <div class="m-0 flex-grow-1 pb-2">        Applied to <strong class="text-black">Front End Developer</strong>
        </div>
        <time class="text-nowrap fw-light pb-2" datetime="2020-09-20">Sep 20</time>
      </li>
      <li class="d-flex align-items-center gap-3 text-secondary">
        <div class="flex-shrink-0 z-0 bg-body py-2">
          <div class="d-inline-flex p-2 rounded-circle bg-primary text-white">        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-up-fill" viewBox="0 0 16 16">
              <path d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a10 10 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733q.086.18.138.363c.077.27.113.567.113.856s-.036.586-.113.856c-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.2 3.2 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.8 4.8 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z" />
            </svg>
          </div>
        </div>
        <div class="m-0 flex-grow-1">        Advanced to phone screening by <strong class="text-black">Bethany Blake</strong>
        </div>
        <time class="text-nowrap fw-light" datetime="2020-09-22">Sep 22</time>
      </li>
      <li class="d-flex align-items-center gap-3 text-secondary">
        <div class="flex-shrink-0 z-0 bg-body py-2">
          <div class="d-inline-flex p-2 rounded-circle bg-success text-white">        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
              <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0" />
            </svg>
          </div>
        </div>
        <div class="m-0 flex-grow-1">        Completed phone screening with <strong class="text-black">Martha Gardner</strong>
        </div>
        <time class="text-nowrap fw-light" datetime="2020-09-28">Sep 28</time>
      </li>
      <li class="d-flex align-items-center gap-3 text-secondary">
        <div class="flex-shrink-0 z-0 bg-body py-2">
          <div class="d-inline-flex p-2 rounded-circle bg-primary text-white">        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-up-fill" viewBox="0 0 16 16">
              <path d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a10 10 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733q.086.18.138.363c.077.27.113.567.113.856s-.036.586-.113.856c-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.2 3.2 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.8 4.8 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z" />
            </svg>
          </div>
        </div>
        <div class="m-0 flex-grow-1">        Advanced to interview by <strong class="text-black">Bethany Blake</strong>
        </div>
        <time class="text-nowrap fw-light" datetime="2020-09-30">Sep 30</time>
      </li>
      <li class="d-flex align-items-center gap-3 text-secondary">
        <div class="flex-shrink-0 z-0 bg-body pt-2">
          <div class="d-inline-flex p-2 rounded-circle bg-success text-white">        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
              <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0" />
            </svg>
          </div>
        </div>
        <div class="m-0 flex-grow-1 pt-2">        Completed interview with <strong class="text-black">Katherine Snyder</strong>
        </div>
        <time class="text-nowrap fw-light pt-2" datetime="2020-10-04">Oct 4</time>
      </li>
    </ul>
  </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/feed_component.rb).
  • A view template (app/components/railsboot/feed_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/feed_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.
Errors Flash