<div class="mb-8">
  <div class="mb-8">
    <h6 class="text-gray-500 mb-3 mt-0">
      Full
    </h6>

    <%= render current_component.new(title: "SEO") do |panel| %>
      <% panel.with_menu("Foo", "#foo") %>
      <% panel.with_menu("Bar", "#bar") %>
      <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
      <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
      <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
      <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
      <% panel.with_action(name: "Foo", href: "#foo") %>
    <% end %>
  </div>


  <h6 class="text-gray-500 mb-3 mt-0">
    Content only
  </h6>

  <%= render current_component.new do %>
    <label>
      SKU:
      ABC-123
    </label>
  <% end %>
</div>

<div class="mb-8">
  <h6 class="text-gray-500 mb-3 mt-0">
    With title
  </h6>

  <%= render current_component.new(title: "SEO") do %>
    <label>
      SKU:
      ABC-123
    </label>
  <% end %>
</div>

<div class="mb-8">
  <h6 class="text-gray-500 mb-3 mt-0">
    With title and hint
  </h6>

  <%= render current_component.new(title: "SEO") do %>
    <label>
      SKU:
      ABC-123
    </label>
  <% end %>
</div>

<div class="mb-8">
  <h6 class="text-gray-500 mb-3 mt-0">
    With title, hint, and actions
  </h6>

  <%= render current_component.new(title: "SEO") do |panel| %>
    <label>
      SKU:
      ABC-123
    </label>

    <% panel.with_action(name: "Foo", href: "#foo") %>
  <% end %>
</div>

<div class="mb-8">
  <h6 class="text-gray-500 mb-3 mt-0">
    With no content
  </h6>

  <%= render current_component.new(title: "SEO") do |panel| %>
    <% panel.with_action(name: "Foo", href: "#foo") %>
  <% end %>
</div>

<div class="mb-8">
  <h6 class="text-gray-500 mb-3 mt-0">
    With a menu
  </h6>

  <%= render current_component.new(title: "SEO") do |panel| %>
    <% panel.with_menu("Foo", "#foo") %>
  <% end %>
</div>
