---
title: Refills
---

<div class="refills-patterns">
  <a class="js-menu-trigger-refills refills-menu-anchor fixedsticky">
    <img src="/images/menu.png" alt="Menu icon">
  </a>
  <div class="js-menu-screen-refills refills-menu-screen"></div>

  <%= partial "refills-hero" %>
  <%= partial "refills-menu" %>

  <div id="example">

    <section id="accordion-tabs" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Accordion / Tabs</h6></div>
        <%= partial "accordion_tabs" %>
      </div>
      <div class="refill-snippet"><%= code_for("accordion_tabs") %></div>
      <div class="refills-wrapper">
        <%= partial "accordion_tabs_minimal" %>
      </div>
      <div class="refill-snippet"><%= code_for("accordion_tabs_minimal") %></div>
    </section>

    <section id="cards" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Cards</h6></div>
        <div class="refill-centering"><%= partial "cards" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("cards") %></div>
    </section>

    <section id="centered-navigation" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Centered Navigation</h6></div>
        <%= partial "centered_navigation" %>
      </div>
      <div class="refill-snippet"><%= code_for("centered_navigation") %></div>
    </section>

    <section id="comment" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Comments</h6></div>
        <div class="refill-centering">
          <div class="refill-smaller"><%= partial "comment" %></div>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("comment") %></div>
    </section>

    <section id="device" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Device</h6></div>
        <%= partial "device" %>
      </div>
      <div class="refill-snippet"><%= code_for("device") %></div>
    </section>

    <section id="flex-boxes" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Flex Boxes</h6></div>
        <%= partial "flex_boxes" %>
      </div>
      <div class="refill-snippet"><%= code_for("flex_boxes") %></div>
    </section>

    <section id="footer" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Footers</h6></div>
        <div class="refill-centering"><%= partial "footer" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("footer") %></div>
      <div class="refills-wrapper">
        <div class="refill-centering"><%= partial "footer_2" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("footer_2") %></div>
    </section>

    <section id="grid-items" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Grid Items</h6></div>
        <div class="refill-centering"><%= partial "grid_items" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("grid_items") %></div>
      <div class="refills-wrapper">
        <div class="refill-centering"><%= partial "grid_items_lines" %></div>
      </div>
      <div class="refill-snippet"><%= code_for("grid_items_lines") %></div>
    </section>

    <section id="hero" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Hero Unit</h6></div>
        <%= partial "hero" %>
      </div>
      <div class="refill-snippet"><%= code_for("hero") %></div>
    </section>

    <section id="icon-bullet-points" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Icon Bullet Points</h6></div>
        <%= partial "icon_bullet_points" %>
      </div>
      <div class="refill-snippet"><%= code_for("icon_bullet_points") %></div>
    </section>

    <section id="maps" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Maps</h6></div>
        <%= partial "maps" %>
      </div>
      <div class="refill-snippet"><%= code_for("maps") %></div>
    </section>

    <section id="navigation" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Navigation</h6></div>
        <%= partial "navigation" %>
      </div>
      <div class="refill-snippet"><%= code_for("navigation") %></div>
    </section>

    <section id="scroll-on-page" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Scroll On Page</h6></div>
        <div class="refill-centering">
          <div class="refill-smaller"><%= partial "scroll_on_page" %></div>
        </div>
      </div>
      <div class="refill-snippet"><%= code_for("scroll_on_page") %></div>
    </section>

    <section id="search-tools" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Search Tools</h6></div>
        <%= partial "search_tools" %>
      </div>
      <div class="refill-snippet"><%= code_for("search_tools") %></div>
    </section>

    <section id="side-image" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Side Image</h6></div>
        <%= partial "side_image" %>
      </div>
      <div class="refill-snippet"><%= code_for("side_image") %></div>
    </section>

    <section id="tables" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Tables</h6></div>
        <%= partial "tables" %>
      </div>
      <div class="refill-snippet"><%= code_for("tables") %></div>
      <div class="refills-wrapper">
        <%= partial "tables_minimal" %>
      </div>
      <div class="refill-snippet"><%= code_for("tables_minimal") %></div>
    </section>

    <section id="vertical-tabs" class="refill">
      <div class="refills-wrapper">
        <div class="line-behind-text"><h6>Vertical Tabs</h6></div>
        <%= partial "vertical_tabs" %>
      </div>
      <div class="refill-snippet"><%= code_for("vertical_tabs") %></div>
    </section>

  </div>
</div>

<%= partial "refills-page-scripts" %>