TrestleAdmin/trestle

<%= container do %>
  <header class="main-content-header">
    <h2 class="m-0">Backgrounds & Borders</h2>
  </header>

  <p class="text-bg-primary p-2 mb-0">This line of text contains the text-bg-primary class.</p>
  <p class="bg-primary text-white p-2 mb-0">This line of text contains the bg-primary class.</p>
  <p class="bg-primary-subtle p-2">This line of text contains the bg-primary-subtle class.</p>

  <p class="border border-primary p-2 mb-1">This line of text contains the border-primary class.</p>
  <p class="border border-primary-subtle p-2">This line of text contains the border-primary-subtle class.</p>

  <p class="text-bg-secondary p-2 mb-0">This line of text contains the text-bg-secondary class.</p>
  <p class="bg-secondary text-white p-2 mb-0">This line of text contains the bg-secondary class.</p>
  <p class="bg-secondary-subtle p-2">This line of text contains the bg-secondary-subtle class.</p>

  <p class="border border-secondary p-2 mb-1">This line of text contains the border-secondary class.</p>
  <p class="border border-secondary-subtle p-2">This line of text contains the border-secondary-subtle class.</p>

  <div class="row g-0">
    <div class="col"><div class="ratio ratio-4x3 theme-bg-darkest"><small class="d-flex align-items-center justify-content-center text-white fw-bold">darkest</small></div></div>
    <div class="col"><div class="ratio ratio-4x3 theme-bg-darker"><small class="d-flex align-items-center justify-content-center text-white fw-bold">darker</small></div></div>
    <div class="col"><div class="ratio ratio-4x3 theme-bg-dark"><small class="d-flex align-items-center justify-content-center text-white fw-bold">dark</small></div></div>
    <div class="col"><div class="ratio ratio-4x3 theme-bg"><small class="d-flex align-items-center justify-content-center text-white fw-bold">default</small></div></div>
    <div class="col"><div class="ratio ratio-4x3 theme-bg-light"><small class="d-flex align-items-center justify-content-center text-white fw-bold">light</small></div></div>
    <div class="col"><div class="ratio ratio-4x3 theme-bg-lighter"><small class="d-flex align-items-center justify-content-center text-white fw-bold">lighter</small></div></div>
    <div class="col"><div class="ratio ratio-4x3 theme-bg-lightest"><small class="d-flex align-items-center justify-content-center text-white fw-bold">lightest</small></div></div>
  </div>
<% end %>