Alerts
<%= alert_box 'You accepted the Terms of service.' %>
<% alert_box context: :warning, dismissible: true, id: 'alert', class: :en, data: {js: 1} do %>
Thanks! You accepted the <%= link_to 'Terms of service', '/#terms' %>.
<% end %>
Panels
<%= panel 'You accepted the Terms of service', title: 'Thanks', tag: :aside %>
<% panel heading: 'Thanks', context: :info, id: 'panel', class: :en, data: {js: 1} do %>
You accepted the Terms of service. <%= icon :ok %>
<% end %>
Panel rows
<% panel_row column_class: 'col-sm-12' do %>
<%= panel 'Plain full-width panel' %>
<% end %>
<% panel_row column_class: 'col-sm-6', id: 'panel-row', class: :en, data: {js: 1} do %>
<%= panel 'John Smith', title: 'User', context: :info %>
<% panel title: 'Phone' do %>
<%= icon :earphone %> 323-555-5555
<% end %>
<% end %>
Modals
<%= modal 'Do what you want!', button: {size: :small, context: :info} %>
<% modal size: :large, id: 'modal', button: {class: :en} do %>
Please accept the Terms of service.
<% end %>
Navs
<% nav do %>
<%= link_to 'Home', '/' %>
<%= link_to 'Profile', '/#profile' %>
<%= link_to 'Settings', '/#settings' %>
<% end %>
<% nav as: :pills, layout: :stacked, id: 'my-nav', data: {value: 1} do %>
<%= link_to 'Home', '/' %>
<%= link_to 'Profile', '/#profile' %>
<%= link_to 'Settings', '/#settings' %>
<% end %>
Navbars
<% navbar inverted: true do %>
<% vertical do %>
<%= link_to 'Home', '/' %>
<% end %>
<% end %>
<% navbar id: 'navbar' do %>
<% vertical id: 'vertical', class: :en, data: {js: 1} do %>
<%= link_to 'Home', '/' %>
<% end %>
<% horizontal class: :en, data: {js: 2} do %>
<% nav class: 'navbar-left' do %>
<%= link_to 'Profile', '/#profile' %>
<%= link_to 'Settings', '/#settings' %>
<% end %>
<% end %>
<% end %>
Buttons
<%= button 'Menu' %>
<% button context: :warning, id: 'button', class: :en, data: {js: 1} do %>
Your
personal menu
<% end %>
Dropdowns
<% dropdown 'Menu', direction: :up, context: :success, align: :right do %>
<%= link_to 'Home', '/' %>
<%= link_to 'Profile', '/#profile' %>
<%= link_to 'Settings', '/#settings' %>
<% end %>
<% dropdown 'Menu', split: true, id: 'dropdown', button: {class: :en} do %>
Home
<%= content_tag :em, 'Profile' %>
<% end %>
Progress bars
<%= progress_bar [{percentage: 75, striped: true}, {percentage: 20, context: :warning, label: true}] %>
<%= progress_bar({percentage: 30, id: 'bar', data: {js: 1}}, id: 'container', class: :en) %>
Icons
<%= icon :user %>
<%= icon :user, library: :font_awesome, class: 'fa-2x', id: 'icon', data: {value: 1} %>
Button to
<%= button_to 'New', '#new', submit_options: {class: 'b'}, class: 'f', method: :get %>
<%= button_to 'New', '#new', submit_options: {class: 'b'}, class: 'f', method: :get, context: :primary %>
<% button_to '/#edit', method: :get do %>
<% end %>
<%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' %>
<%= javascript_include_tag bootstrap_js %>