tylerlee

<%= list_table_for @team_members do |list| %>
  <% list.empty 'There are no people to show at this time' %>
  
  <% list.row do |team_member| %>
    <td class="list-item">
      <%= profile_picture(team_member) %>
      <div class="list-item-title with-pic">
        <h5><%= team_member.display_name %></h5>
        <div class="details"><%= (team_member.city + ', ' if team_member.city) + team_member.state %></div>
      </div>

tylerlee

<div class="button-row">
  <%= the_button 'Button One', '' %>
  <%= the_button 'Button Two', '' %>
</div>

tylerlee

<ul class="joined-buttons">
  <li class="left-side"><%= the_button 'First Button', '' %></li>
  <li><%= the_button 'Middle Button', '' %></li>
  <li><%= the_button 'Last Button', '' %></li>
</ul>

tylerlee

# Pass the size: 'tiny' to make a smaller button
<%= the_button 'Stanard Button', '' %>

# Pass the size: 'tiny' to make a smaller button
<%= the_button 'Tiny Button', '', :size => 'tiny' %>

# The large button is used in special places like Forms
<%= the_button 'Large', '', :class => 'large' %>

# Rounded edges on a button

tylerlee

# Basic Button
<%= the_button 'A Basic Button' %>

# Button + Icon
<%= the_button 'A File Icon', '', icon: 'file' %>

# Primary Button
# Used to represent the main action on a webpage
<%= the_button 'Primary Action', '', type: 'primary' %>

tylerlee

The button is a little bit out of date, and the html_options are a bit contrived in their usefulness. However, this is how you use it: 

<%= the_button 'Submit', url_options, html_options %>

html_options =  size: specify 'small', if you want the button smaller
                type: specify 'primary' if the button is the primary action on a page
                icon: specify the name of an icon from the icon font
                popup: 'data-popup-value'
                
The submit button is just a simplified version of the_button for submitting forms. 

tylerlee

<!-- Split Layout -->
<div class="layout split">
  <div class="main">
    Main
  </div>
  <div class="sidebar">
    Sidebar
  </div>
</div>

tylerlee

<!-- Layout with Sidebar (Left) -->
<div class="layout with-sidebar">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="main">
    Main
  </div>
</div>

tylerlee

<!-- Layout With Sidebar -->
<div class="layout with-sidebar">
  <div class="main">
    Main
  </div>
  <div class="sidebar">
    Sidebar
  </div>
</div>

tylerlee

<!-- "Full" Layout. The Default -->
<div class="layout">
  <div class="main">
    Main
  </div>
</div>