bs5 0.0.26 → 0.0.31

data/app/views/bs5/examples/carousel/examples/snippet5.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet6.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
+  <% c.item(interval: 10_000) do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item(interval: 2_000) do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/_examples.html.erb

@@ -0,0 +1,9 @@
+<h2>Examples</h2>
+<h3>Live demo</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet1') %>
+<h3>Static backdrop</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet2') %>
+<h3>Scrolling long content</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet3') %>
+<h3>Vertically centered</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet4') %>

data/app/views/bs5/examples/modal/_fullscreen.html.erb

@@ -0,0 +1,2 @@
+<h2>Fullscreen Modal</h2>
+<%= bs5_example(snippet: 'modal/fullscreen/snippet1') %>

data/app/views/bs5/examples/modal/_optional_sizes.html.erb

@@ -0,0 +1,2 @@
+<h2>Optional sizes</h2>
+<%= bs5_example(snippet: 'modal/optional_sizes/snippet1') %>

data/app/views/bs5/examples/modal/examples/snippet1.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>Modal body text goes here.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/examples/snippet2.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal(backdrop: :static, keyboard: false) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>I will not close if you click outside me. Don't even try to press escape key.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Understood', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/examples/snippet3.html.erb

@@ -0,0 +1,14 @@
+<%= bs5_modal(scroll: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <% 15.times do %>
+      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <% end %>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/examples/snippet4.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal(center: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/fullscreen/snippet1.html.erb

@@ -0,0 +1,55 @@
+<%= bs5_modal(fullscreen: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen modal' } %>
+  <%= m.body do %>
+    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  <% end %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :sm) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below sm', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below sm' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :md) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below md', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below md' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :lg) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below lg', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below lg' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :xl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below xl', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below xl' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :xxl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below xxl', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below xxl' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>

data/app/views/bs5/examples/modal/optional_sizes/snippet1.html.erb

@@ -0,0 +1,23 @@
+<%= bs5_modal(size: :xl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Extra large modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Extra large modal' } %>
+  <%= m.body { '...' } %>
+<% end %>
+
+<%= bs5_modal(size: :lg) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Large modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Large modal' } %>
+  <%= m.body { '...' } %>
+<% end %>
+
+<%= bs5_modal(size: :sm) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Small modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Small modal' } %>
+  <%= m.body { '...' } %>
+<% end %>

data/app/views/bs5/examples/navs_and_tabs/_base_nav.html.erb

@@ -0,0 +1,2 @@
+<h2>Base nav</h2>
+<%= bs5_example(snippet: 'navs_and_tabs/base_nav/snippet1') %>

data/app/views/bs5/examples/navs_and_tabs/_dropdowns.html.erb

@@ -0,0 +1,5 @@
+<h2>Using dropdowns</h2>
+<h3>Tabs with dropdowns</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/dropdowns/snippet1') %>
+<h3>Pills with dropdowns</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/dropdowns/snippet2') %>

data/app/views/bs5/examples/navs_and_tabs/_flex_utils.html.erb

@@ -0,0 +1,2 @@
+<h2>Working with flex utilities</h2>
+<%= bs5_example(snippet: 'navs_and_tabs/flex_utils/snippet1') %>

data/app/views/bs5/examples/navs_and_tabs/_styles.html.erb

@@ -0,0 +1,15 @@
+<h2>Available styles</h2>
+<h3>Horizontal alignment</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet1') %>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet2') %>
+<h3>Vertical</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet3') %>
+<h3>Tabs</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet4') %>
+<h3>Pills</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet5') %>
+<h3>Fill and justify</h3>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet6') %>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet7') %>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet8') %>
+<%= bs5_example(snippet: 'navs_and_tabs/styles/snippet9') %>

data/app/views/bs5/examples/navs_and_tabs/_tabs.html.erb

@@ -0,0 +1,4 @@
+<h2>Tabs</h2>
+<%= bs5_example(snippet: 'navs_and_tabs/tabs/snippet1') %>
+<%= bs5_example(snippet: 'navs_and_tabs/tabs/snippet2') %>
+<%= bs5_example(snippet: 'navs_and_tabs/tabs/snippet3') %>

data/app/views/bs5/examples/navs_and_tabs/base_nav/snippet1.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/dropdowns/snippet1.html.erb

@@ -0,0 +1,14 @@
+<%= bs5_nav(style: :tabs) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %>
+    <%= bs5_dropdown('Dropdown', color: :link) do |d| %>
+      <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+      <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+      <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+      <%= d.item do %><% end %>
+      <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+    <% end %>
+  <% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/dropdowns/snippet2.html.erb

@@ -0,0 +1,14 @@
+<%= bs5_nav(style: :pills) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %>
+    <%= bs5_dropdown('Dropdown', color: :link) do |d| %>
+      <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+      <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+      <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+      <%= d.item do %><% end %>
+      <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+    <% end %>
+  <% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/flex_utils/snippet1.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :pills, class: 'flex-column flex-sm-row') do |n| %>
+  <% n.item(active: true, class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item(class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Longer nav link', '#' %><% end %>
+  <% n.item(class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true, class: 'flex-sm-fill text-sm-center') do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet1.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(class: 'justify-content-center') do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet2.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(class: 'justify-content-end') do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet3.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(class: 'flex-column') do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet4.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :tabs) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet5.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :pills) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet6.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :pills, space: :fill) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet7.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :tabs, space: :fill) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet8.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :pills, space: :justified) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/styles/snippet9.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_nav(style: :tabs, space: :justified) do |n| %>
+  <% n.item(active: true) do %><%= link_to 'Active', '#' %><% end %>
+  <% n.item do %><%= link_to 'Much longer nav link', '#' %><% end %>
+  <% n.item do %><%= link_to 'Link', '#' %><% end %>
+  <% n.item(disabled: true) do %><%= link_to 'Disabled', '#' %><% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/tabs/snippet1.html.erb

@@ -0,0 +1,11 @@
+<%= bs5_tabs(style: :tabs) do |n| %>
+  <% n.item('Home', active: true) do %>
+    <p class="mt-3">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
+  <% end %>
+  <% n.item('Profile') do %>
+    <p class="mt-3">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
+  <% end %>
+  <% n.item('Contact') do %>
+    <p class="mt-3">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
+  <% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/tabs/snippet2.html.erb

@@ -0,0 +1,11 @@
+<%= bs5_tabs(style: :pills) do |n| %>
+  <% n.item('Home', active: true) do %>
+    <p class="mt-3">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
+  <% end %>
+  <% n.item('Profile') do %>
+    <p class="mt-3">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
+  <% end %>
+  <% n.item('Contact') do %>
+    <p class="mt-3">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
+  <% end %>
+<%- end %>

data/app/views/bs5/examples/navs_and_tabs/tabs/snippet3.html.erb

@@ -0,0 +1,11 @@
+<%= bs5_tabs(vertical: true) do |n| %>
+  <% n.item('Home', active: true) do %>
+    <p class="ms-3">Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
+  <% end %>
+  <% n.item('Profile') do %>
+    <p class="ms-3">Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.</p>
+  <% end %>
+  <% n.item('Contact') do %>
+    <p class="ms-3">Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.</p>
+  <% end %>
+<%- end %>

data/app/views/bs5/examples/progress/_animated.html.erb

@@ -0,0 +1,2 @@
+<h2>Animated stripes</h2>
+<%= bs5_example(snippet: 'progress/animated/snippet1') %>

data/app/views/bs5/examples/progress/_backgrounds.html.erb

@@ -0,0 +1,2 @@
+<h2>Backgrounds</h2>
+<%= bs5_example(snippet: 'progress/backgrounds/snippet1') %>

data/app/views/bs5/examples/progress/_examples.html.erb

@@ -0,0 +1,2 @@
+<h2>Examples</h2>
+<%= bs5_example(snippet: 'progress/examples/snippet1') %>

data/app/views/bs5/examples/progress/_labels.html.erb

@@ -0,0 +1,2 @@
+<h2>Labels</h2>
+<%= bs5_example(snippet: 'progress/labels/snippet1') %>

data/app/views/bs5/examples/progress/_multiple_bars.html.erb

@@ -0,0 +1,2 @@
+<h2>Multiple bars</h2>
+<%= bs5_example(snippet: 'progress/multiple_bars/snippet1') %>

data/app/views/bs5/examples/progress/_striped.html.erb

@@ -0,0 +1,2 @@
+<h2>Striped</h2>
+<%= bs5_example(snippet: 'progress/striped/snippet1') %>

data/app/views/bs5/examples/progress/animated/snippet1.html.erb

@@ -0,0 +1,13 @@
+<div class="mb-3">
+  <%= bs5_progress(25, animated: true, color: :success) %>
+</div>
+
+<div class="mb-3">
+  <%= bs5_progress(50, animated: true, color: :info) %>
+</div>
+
+<div class="mb-3">
+  <%= bs5_progress(75, animated: true, color: :warning) %>
+</div>
+
+<%= bs5_progress(100, animated: true, color: :danger) %>

data/app/views/bs5/examples/progress/backgrounds/snippet1.html.erb

@@ -0,0 +1,13 @@
+<div class="mb-3">
+  <%= bs5_progress(25, color: :success) %>
+</div>
+
+<div class="mb-3">
+  <%= bs5_progress(50, color: :info) %>
+</div>
+
+<div class="mb-3">
+  <%= bs5_progress(75, color: :warning) %>
+</div>
+
+<%= bs5_progress(100, color: :danger) %>