From bfc201b7a46f25dfefda8b24d84352b8e204409c Mon Sep 17 00:00:00 2001
From: Drew Bednar <drew@runcible.io>
Date: Sun, 27 Jul 2025 08:24:28 -0400
Subject: [PATCH] adding layout

---
 application_ui/layout/cards/basic_card.html   |  5 ++
 .../cards/card_edge_to_edge_on_mobile.html    |  6 ++
 .../layout/cards/card_with_footer.html        | 11 +++
 .../layout/cards/card_with_gray_body.html     |  9 ++
 .../layout/cards/card_with_gray_footer.html   |  9 ++
 .../layout/cards/card_with_header.html        | 11 +++
 .../cards/card_with_heeader_and_footer.html   | 15 ++++
 application_ui/layout/cards/well.html         |  5 ++
 .../cards/well_edge_to_edge_on_mobile.html    |  6 ++
 application_ui/layout/cards/well_on_gray.html |  5 ++
 ...constrained_to_br_with_padded_content.html |  3 +
 .../constrained_with_padded_content.html      |  3 +
 ...constrained_to_br_with_padded_content.html |  4 +
 ...constrained_with_padded_content_above.html |  3 +
 ...arrow_constrained_with_padded_content.html |  6 ++
 .../layout/dividers/with_button.html          | 24 ++++++
 application_ui/layout/dividers/with_icon.html | 20 +++++
 .../layout/dividers/with_label.html           |  8 ++
 .../layout/dividers/with_label_on_left.html   |  8 ++
 .../layout/dividers/with_title.html           | 10 +++
 .../dividers/with_title_and_button.html       | 27 ++++++
 .../layout/dividers/with_title_on_left.html   | 10 +++
 .../layout/dividers/with_toolbar.html         | 83 +++++++++++++++++++
 .../list_containers/card_with_dividers.html   | 13 +++
 ...rd_with_dividers_full_width_on_mobile.html | 13 +++
 .../flat_card_with_dividers.html              | 13 +++
 .../list_containers/separate_cards.html       | 11 +++
 .../separate_cards_full_width_on_mobile.html  | 17 ++++
 .../list_containers/simple_with_dividers.html | 11 +++
 ...le_with_dividers_full_width_on_mobile.html | 11 +++
 .../media_objects/aligned_to_bottom.html      | 25 ++++++
 .../media_objects/aligned_to_center.html      | 25 ++++++
 .../layout/media_objects/basic.html           | 25 ++++++
 .../media_objects/basic_responsive.html       | 25 ++++++
 .../layout/media_objects/media_on_right.html  | 25 ++++++
 .../layout/media_objects/nested.html          | 78 +++++++++++++++++
 .../media_objects/stretched_to_fit.html       | 25 ++++++
 .../layout/media_objects/wide_responsive.html | 25 ++++++
 38 files changed, 633 insertions(+)
 create mode 100644 application_ui/layout/cards/basic_card.html
 create mode 100644 application_ui/layout/cards/card_edge_to_edge_on_mobile.html
 create mode 100644 application_ui/layout/cards/card_with_footer.html
 create mode 100644 application_ui/layout/cards/card_with_gray_body.html
 create mode 100644 application_ui/layout/cards/card_with_gray_footer.html
 create mode 100644 application_ui/layout/cards/card_with_header.html
 create mode 100644 application_ui/layout/cards/card_with_heeader_and_footer.html
 create mode 100644 application_ui/layout/cards/well.html
 create mode 100644 application_ui/layout/cards/well_edge_to_edge_on_mobile.html
 create mode 100644 application_ui/layout/cards/well_on_gray.html
 create mode 100644 application_ui/layout/containers/constrained_to_br_with_padded_content.html
 create mode 100644 application_ui/layout/containers/constrained_with_padded_content.html
 create mode 100644 application_ui/layout/containers/full_mobil_constrained_to_br_with_padded_content.html
 create mode 100644 application_ui/layout/containers/full_mobile_constrained_with_padded_content_above.html
 create mode 100644 application_ui/layout/containers/narrow_constrained_with_padded_content.html
 create mode 100644 application_ui/layout/dividers/with_button.html
 create mode 100644 application_ui/layout/dividers/with_icon.html
 create mode 100644 application_ui/layout/dividers/with_label.html
 create mode 100644 application_ui/layout/dividers/with_label_on_left.html
 create mode 100644 application_ui/layout/dividers/with_title.html
 create mode 100644 application_ui/layout/dividers/with_title_and_button.html
 create mode 100644 application_ui/layout/dividers/with_title_on_left.html
 create mode 100644 application_ui/layout/dividers/with_toolbar.html
 create mode 100644 application_ui/layout/list_containers/card_with_dividers.html
 create mode 100644 application_ui/layout/list_containers/card_with_dividers_full_width_on_mobile.html
 create mode 100644 application_ui/layout/list_containers/flat_card_with_dividers.html
 create mode 100644 application_ui/layout/list_containers/separate_cards.html
 create mode 100644 application_ui/layout/list_containers/separate_cards_full_width_on_mobile.html
 create mode 100644 application_ui/layout/list_containers/simple_with_dividers.html
 create mode 100644 application_ui/layout/list_containers/simple_with_dividers_full_width_on_mobile.html
 create mode 100644 application_ui/layout/media_objects/aligned_to_bottom.html
 create mode 100644 application_ui/layout/media_objects/aligned_to_center.html
 create mode 100644 application_ui/layout/media_objects/basic.html
 create mode 100644 application_ui/layout/media_objects/basic_responsive.html
 create mode 100644 application_ui/layout/media_objects/media_on_right.html
 create mode 100644 application_ui/layout/media_objects/nested.html
 create mode 100644 application_ui/layout/media_objects/stretched_to_fit.html
 create mode 100644 application_ui/layout/media_objects/wide_responsive.html

diff --git a/application_ui/layout/cards/basic_card.html b/application_ui/layout/cards/basic_card.html
new file mode 100644
index 0000000..44344a8
--- /dev/null
+++ b/application_ui/layout/cards/basic_card.html
@@ -0,0 +1,5 @@
+<div class="overflow-hidden rounded-lg bg-white shadow-sm">
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/card_edge_to_edge_on_mobile.html b/application_ui/layout/cards/card_edge_to_edge_on_mobile.html
new file mode 100644
index 0000000..1d170ea
--- /dev/null
+++ b/application_ui/layout/cards/card_edge_to_edge_on_mobile.html
@@ -0,0 +1,6 @@
+<!-- Be sure to use this with a layout container that is full-width on mobile -->
+<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/card_with_footer.html b/application_ui/layout/cards/card_with_footer.html
new file mode 100644
index 0000000..8fb08db
--- /dev/null
+++ b/application_ui/layout/cards/card_with_footer.html
@@ -0,0 +1,11 @@
+<div
+    class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm"
+>
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+    <div class="px-4 py-4 sm:px-6">
+        <!-- Content goes here -->
+        <!-- We use less vertical padding on card footers at all sizes than on headers or body sections -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/card_with_gray_body.html b/application_ui/layout/cards/card_with_gray_body.html
new file mode 100644
index 0000000..bf34ce7
--- /dev/null
+++ b/application_ui/layout/cards/card_with_gray_body.html
@@ -0,0 +1,9 @@
+<div class="overflow-hidden rounded-lg bg-white shadow-sm">
+    <div class="px-4 py-5 sm:px-6">
+        <!-- Content goes here -->
+        <!-- We use less vertical padding on card headers on desktop than on body sections -->
+    </div>
+    <div class="bg-gray-50 px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/card_with_gray_footer.html b/application_ui/layout/cards/card_with_gray_footer.html
new file mode 100644
index 0000000..96df8e7
--- /dev/null
+++ b/application_ui/layout/cards/card_with_gray_footer.html
@@ -0,0 +1,9 @@
+<div class="overflow-hidden rounded-lg bg-white shadow-sm">
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+    <div class="bg-gray-50 px-4 py-4 sm:px-6">
+        <!-- Content goes here -->
+        <!-- We use less vertical padding on card footers at all sizes than on headers or body sections -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/card_with_header.html b/application_ui/layout/cards/card_with_header.html
new file mode 100644
index 0000000..2120d7e
--- /dev/null
+++ b/application_ui/layout/cards/card_with_header.html
@@ -0,0 +1,11 @@
+<div
+    class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm"
+>
+    <div class="px-4 py-5 sm:px-6">
+        <!-- Content goes here -->
+        <!-- We use less vertical padding on card headers on desktop than on body sections -->
+    </div>
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/card_with_heeader_and_footer.html b/application_ui/layout/cards/card_with_heeader_and_footer.html
new file mode 100644
index 0000000..01e2527
--- /dev/null
+++ b/application_ui/layout/cards/card_with_heeader_and_footer.html
@@ -0,0 +1,15 @@
+<div
+    class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm"
+>
+    <div class="px-4 py-5 sm:px-6">
+        <!-- Content goes here -->
+        <!-- We use less vertical padding on card headers on desktop than on body sections -->
+    </div>
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+    <div class="px-4 py-4 sm:px-6">
+        <!-- Content goes here -->
+        <!-- We use less vertical padding on card footers at all sizes than on headers or body sections -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/well.html b/application_ui/layout/cards/well.html
new file mode 100644
index 0000000..f65fdac
--- /dev/null
+++ b/application_ui/layout/cards/well.html
@@ -0,0 +1,5 @@
+<div class="overflow-hidden rounded-lg bg-gray-50">
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/well_edge_to_edge_on_mobile.html b/application_ui/layout/cards/well_edge_to_edge_on_mobile.html
new file mode 100644
index 0000000..891a6ff
--- /dev/null
+++ b/application_ui/layout/cards/well_edge_to_edge_on_mobile.html
@@ -0,0 +1,6 @@
+<!-- Be sure to use this with a layout container that is full-width on mobile -->
+<div class="overflow-hidden bg-gray-50 sm:rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/cards/well_on_gray.html b/application_ui/layout/cards/well_on_gray.html
new file mode 100644
index 0000000..05e5dbe
--- /dev/null
+++ b/application_ui/layout/cards/well_on_gray.html
@@ -0,0 +1,5 @@
+<div class="overflow-hidden rounded-lg bg-gray-200">
+    <div class="px-4 py-5 sm:p-6">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/containers/constrained_to_br_with_padded_content.html b/application_ui/layout/containers/constrained_to_br_with_padded_content.html
new file mode 100644
index 0000000..280e49d
--- /dev/null
+++ b/application_ui/layout/containers/constrained_to_br_with_padded_content.html
@@ -0,0 +1,3 @@
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+    <!-- Content goes here -->
+</div>
diff --git a/application_ui/layout/containers/constrained_with_padded_content.html b/application_ui/layout/containers/constrained_with_padded_content.html
new file mode 100644
index 0000000..1ba26f7
--- /dev/null
+++ b/application_ui/layout/containers/constrained_with_padded_content.html
@@ -0,0 +1,3 @@
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <!-- Content goes here -->
+</div>
diff --git a/application_ui/layout/containers/full_mobil_constrained_to_br_with_padded_content.html b/application_ui/layout/containers/full_mobil_constrained_to_br_with_padded_content.html
new file mode 100644
index 0000000..97c12e2
--- /dev/null
+++ b/application_ui/layout/containers/full_mobil_constrained_to_br_with_padded_content.html
@@ -0,0 +1,4 @@
+<!-- Full-width on mobile, constrained to breakpoint with padded content above mobile -->
+<div class="container mx-auto sm:px-6 lg:px-8">
+    <!-- Content goes here -->
+</div>
diff --git a/application_ui/layout/containers/full_mobile_constrained_with_padded_content_above.html b/application_ui/layout/containers/full_mobile_constrained_with_padded_content_above.html
new file mode 100644
index 0000000..ad65614
--- /dev/null
+++ b/application_ui/layout/containers/full_mobile_constrained_with_padded_content_above.html
@@ -0,0 +1,3 @@
+<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+    <!-- Content goes here -->
+</div>
diff --git a/application_ui/layout/containers/narrow_constrained_with_padded_content.html b/application_ui/layout/containers/narrow_constrained_with_padded_content.html
new file mode 100644
index 0000000..1184d37
--- /dev/null
+++ b/application_ui/layout/containers/narrow_constrained_with_padded_content.html
@@ -0,0 +1,6 @@
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
+    <div class="mx-auto max-w-3xl">
+        <!-- Content goes here -->
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_button.html b/application_ui/layout/dividers/with_button.html
new file mode 100644
index 0000000..1673d58
--- /dev/null
+++ b/application_ui/layout/dividers/with_button.html
@@ -0,0 +1,24 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-center">
+        <button
+            type="button"
+            class="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
+        >
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="-mr-0.5 -ml-1 size-5 text-gray-400"
+            >
+                <path
+                    d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
+                />
+            </svg>
+            Button text
+        </button>
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_icon.html b/application_ui/layout/dividers/with_icon.html
new file mode 100644
index 0000000..0666de4
--- /dev/null
+++ b/application_ui/layout/dividers/with_icon.html
@@ -0,0 +1,20 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-center">
+        <span class="bg-white px-2 text-gray-500">
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="size-5 text-gray-500"
+            >
+                <path
+                    d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
+                />
+            </svg>
+        </span>
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_label.html b/application_ui/layout/dividers/with_label.html
new file mode 100644
index 0000000..f16398e
--- /dev/null
+++ b/application_ui/layout/dividers/with_label.html
@@ -0,0 +1,8 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-center">
+        <span class="bg-white px-2 text-sm text-gray-500">Continue</span>
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_label_on_left.html b/application_ui/layout/dividers/with_label_on_left.html
new file mode 100644
index 0000000..cc177fa
--- /dev/null
+++ b/application_ui/layout/dividers/with_label_on_left.html
@@ -0,0 +1,8 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-start">
+        <span class="bg-white pr-2 text-sm text-gray-500">Continue</span>
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_title.html b/application_ui/layout/dividers/with_title.html
new file mode 100644
index 0000000..c7a8329
--- /dev/null
+++ b/application_ui/layout/dividers/with_title.html
@@ -0,0 +1,10 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-center">
+        <span class="bg-white px-3 text-base font-semibold text-gray-900"
+            >Projects</span
+        >
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_title_and_button.html b/application_ui/layout/dividers/with_title_and_button.html
new file mode 100644
index 0000000..a36673d
--- /dev/null
+++ b/application_ui/layout/dividers/with_title_and_button.html
@@ -0,0 +1,27 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex items-center justify-between">
+        <span class="bg-white pr-3 text-base font-semibold text-gray-900"
+            >Projects</span
+        >
+        <button
+            type="button"
+            class="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
+        >
+            <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                class="-mr-0.5 -ml-1 size-5 text-gray-400"
+            >
+                <path
+                    d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
+                />
+            </svg>
+            <span>Button text</span>
+        </button>
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_title_on_left.html b/application_ui/layout/dividers/with_title_on_left.html
new file mode 100644
index 0000000..c59dd6a
--- /dev/null
+++ b/application_ui/layout/dividers/with_title_on_left.html
@@ -0,0 +1,10 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-start">
+        <span class="bg-white pr-3 text-base font-semibold text-gray-900"
+            >Projects</span
+        >
+    </div>
+</div>
diff --git a/application_ui/layout/dividers/with_toolbar.html b/application_ui/layout/dividers/with_toolbar.html
new file mode 100644
index 0000000..be3a347
--- /dev/null
+++ b/application_ui/layout/dividers/with_toolbar.html
@@ -0,0 +1,83 @@
+<div class="relative">
+    <div aria-hidden="true" class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+    </div>
+    <div class="relative flex justify-center">
+        <span class="isolate inline-flex -space-x-px rounded-md shadow-xs">
+            <button
+                type="button"
+                class="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
+            >
+                <span class="sr-only">Edit</span>
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5"
+                >
+                    <path
+                        d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
+                    />
+                </svg>
+            </button>
+            <button
+                type="button"
+                class="relative inline-flex items-center bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
+            >
+                <span class="sr-only">Attachment</span>
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5"
+                >
+                    <path
+                        d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+            </button>
+            <button
+                type="button"
+                class="relative inline-flex items-center bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
+            >
+                <span class="sr-only">Annotate</span>
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5"
+                >
+                    <path
+                        d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+            </button>
+            <button
+                type="button"
+                class="relative inline-flex items-center rounded-r-md bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
+            >
+                <span class="sr-only">Delete</span>
+                <svg
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    data-slot="icon"
+                    aria-hidden="true"
+                    class="size-5"
+                >
+                    <path
+                        d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                    />
+                </svg>
+            </button>
+        </span>
+    </div>
+</div>
diff --git a/application_ui/layout/list_containers/card_with_dividers.html b/application_ui/layout/list_containers/card_with_dividers.html
new file mode 100644
index 0000000..4a5cb90
--- /dev/null
+++ b/application_ui/layout/list_containers/card_with_dividers.html
@@ -0,0 +1,13 @@
+<div class="overflow-hidden rounded-md bg-white shadow-sm">
+    <ul role="list" class="divide-y divide-gray-200">
+        <li class="px-6 py-4">
+            <!-- Your content -->
+        </li>
+        <li class="px-6 py-4">
+            <!-- Your content -->
+        </li>
+        <li class="px-6 py-4">
+            <!-- Your content -->
+        </li>
+    </ul>
+</div>
diff --git a/application_ui/layout/list_containers/card_with_dividers_full_width_on_mobile.html b/application_ui/layout/list_containers/card_with_dividers_full_width_on_mobile.html
new file mode 100644
index 0000000..30939e2
--- /dev/null
+++ b/application_ui/layout/list_containers/card_with_dividers_full_width_on_mobile.html
@@ -0,0 +1,13 @@
+<div class="overflow-hidden bg-white shadow-sm sm:rounded-md">
+    <ul role="list" class="divide-y divide-gray-200">
+        <li class="px-4 py-4 sm:px-6">
+            <!-- Your content -->
+        </li>
+        <li class="px-4 py-4 sm:px-6">
+            <!-- Your content -->
+        </li>
+        <li class="px-4 py-4 sm:px-6">
+            <!-- Your content -->
+        </li>
+    </ul>
+</div>
diff --git a/application_ui/layout/list_containers/flat_card_with_dividers.html b/application_ui/layout/list_containers/flat_card_with_dividers.html
new file mode 100644
index 0000000..3ac9df5
--- /dev/null
+++ b/application_ui/layout/list_containers/flat_card_with_dividers.html
@@ -0,0 +1,13 @@
+<div class="overflow-hidden rounded-md border border-gray-300 bg-white">
+    <ul role="list" class="divide-y divide-gray-300">
+        <li class="px-6 py-4">
+            <!-- Your content -->
+        </li>
+        <li class="px-6 py-4">
+            <!-- Your content -->
+        </li>
+        <li class="px-6 py-4">
+            <!-- Your content -->
+        </li>
+    </ul>
+</div>
diff --git a/application_ui/layout/list_containers/separate_cards.html b/application_ui/layout/list_containers/separate_cards.html
new file mode 100644
index 0000000..6cd1b49
--- /dev/null
+++ b/application_ui/layout/list_containers/separate_cards.html
@@ -0,0 +1,11 @@
+<ul role="list" class="space-y-3">
+    <li class="overflow-hidden rounded-md bg-white px-6 py-4 shadow-sm">
+        <!-- Your content -->
+    </li>
+    <li class="overflow-hidden rounded-md bg-white px-6 py-4 shadow-sm">
+        <!-- Your content -->
+    </li>
+    <li class="overflow-hidden rounded-md bg-white px-6 py-4 shadow-sm">
+        <!-- Your content -->
+    </li>
+</ul>
diff --git a/application_ui/layout/list_containers/separate_cards_full_width_on_mobile.html b/application_ui/layout/list_containers/separate_cards_full_width_on_mobile.html
new file mode 100644
index 0000000..19d650e
--- /dev/null
+++ b/application_ui/layout/list_containers/separate_cards_full_width_on_mobile.html
@@ -0,0 +1,17 @@
+<ul role="list" class="space-y-3">
+    <li
+        class="overflow-hidden bg-white px-4 py-4 shadow-sm sm:rounded-md sm:px-6"
+    >
+        <!-- Your content -->
+    </li>
+    <li
+        class="overflow-hidden bg-white px-4 py-4 shadow-sm sm:rounded-md sm:px-6"
+    >
+        <!-- Your content -->
+    </li>
+    <li
+        class="overflow-hidden bg-white px-4 py-4 shadow-sm sm:rounded-md sm:px-6"
+    >
+        <!-- Your content -->
+    </li>
+</ul>
diff --git a/application_ui/layout/list_containers/simple_with_dividers.html b/application_ui/layout/list_containers/simple_with_dividers.html
new file mode 100644
index 0000000..e4d47a8
--- /dev/null
+++ b/application_ui/layout/list_containers/simple_with_dividers.html
@@ -0,0 +1,11 @@
+<ul role="list" class="divide-y divide-gray-200">
+    <li class="py-4">
+        <!-- Your content -->
+    </li>
+    <li class="py-4">
+        <!-- Your content -->
+    </li>
+    <li class="py-4">
+        <!-- Your content -->
+    </li>
+</ul>
diff --git a/application_ui/layout/list_containers/simple_with_dividers_full_width_on_mobile.html b/application_ui/layout/list_containers/simple_with_dividers_full_width_on_mobile.html
new file mode 100644
index 0000000..215b34f
--- /dev/null
+++ b/application_ui/layout/list_containers/simple_with_dividers_full_width_on_mobile.html
@@ -0,0 +1,11 @@
+<ul role="list" class="divide-y divide-gray-200">
+    <li class="px-4 py-4 sm:px-0">
+        <!-- Your content -->
+    </li>
+    <li class="px-4 py-4 sm:px-0">
+        <!-- Your content -->
+    </li>
+    <li class="px-4 py-4 sm:px-0">
+        <!-- Your content -->
+    </li>
+</ul>
diff --git a/application_ui/layout/media_objects/aligned_to_bottom.html b/application_ui/layout/media_objects/aligned_to_bottom.html
new file mode 100644
index 0000000..aae3aeb
--- /dev/null
+++ b/application_ui/layout/media_objects/aligned_to_bottom.html
@@ -0,0 +1,25 @@
+<div class="flex">
+    <div class="mr-4 shrink-0 self-end">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="size-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/aligned_to_center.html b/application_ui/layout/media_objects/aligned_to_center.html
new file mode 100644
index 0000000..c1faaac
--- /dev/null
+++ b/application_ui/layout/media_objects/aligned_to_center.html
@@ -0,0 +1,25 @@
+<div class="flex">
+    <div class="mr-4 shrink-0 self-center">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="size-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/basic.html b/application_ui/layout/media_objects/basic.html
new file mode 100644
index 0000000..4d36f1e
--- /dev/null
+++ b/application_ui/layout/media_objects/basic.html
@@ -0,0 +1,25 @@
+<div class="flex">
+    <div class="mr-4 shrink-0">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="size-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/basic_responsive.html b/application_ui/layout/media_objects/basic_responsive.html
new file mode 100644
index 0000000..2384950
--- /dev/null
+++ b/application_ui/layout/media_objects/basic_responsive.html
@@ -0,0 +1,25 @@
+<div class="sm:flex">
+    <div class="mb-4 shrink-0 sm:mr-4 sm:mb-0">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="size-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/media_on_right.html b/application_ui/layout/media_objects/media_on_right.html
new file mode 100644
index 0000000..a116218
--- /dev/null
+++ b/application_ui/layout/media_objects/media_on_right.html
@@ -0,0 +1,25 @@
+<div class="flex">
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+    <div class="ml-4 shrink-0">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="size-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/nested.html b/application_ui/layout/media_objects/nested.html
new file mode 100644
index 0000000..f71a6b0
--- /dev/null
+++ b/application_ui/layout/media_objects/nested.html
@@ -0,0 +1,78 @@
+<div class="flex">
+    <div class="mr-4 shrink-0">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="size-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+
+        <div class="mt-6 flex">
+            <div class="mr-4 shrink-0">
+                <svg
+                    viewBox="0 0 200 200"
+                    fill="none"
+                    stroke="currentColor"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="size-12 border border-gray-300 bg-white text-gray-300"
+                >
+                    <path
+                        d="M0 0l200 200M0 200L200 0"
+                        stroke-width="1"
+                        vector-effect="non-scaling-stroke"
+                    />
+                </svg>
+            </div>
+            <div>
+                <h4 class="text-lg font-bold">Lorem ipsum</h4>
+                <p class="mt-1">
+                    Repudiandae sint consequuntur vel. Amet ut nobis explicabo
+                    numquam expedita quia omnis voluptatem. Minus quidem ipsam
+                    quia iusto.
+                </p>
+            </div>
+        </div>
+        <div class="mt-6 flex">
+            <div class="mr-4 shrink-0">
+                <svg
+                    viewBox="0 0 200 200"
+                    fill="none"
+                    stroke="currentColor"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="size-12 border border-gray-300 bg-white text-gray-300"
+                >
+                    <path
+                        d="M0 0l200 200M0 200L200 0"
+                        stroke-width="1"
+                        vector-effect="non-scaling-stroke"
+                    />
+                </svg>
+            </div>
+            <div>
+                <h4 class="text-lg font-bold">Lorem ipsum</h4>
+                <p class="mt-1">
+                    Repudiandae sint consequuntur vel. Amet ut nobis explicabo
+                    numquam expedita quia omnis voluptatem. Minus quidem ipsam
+                    quia iusto.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/stretched_to_fit.html b/application_ui/layout/media_objects/stretched_to_fit.html
new file mode 100644
index 0000000..1fa2e7c
--- /dev/null
+++ b/application_ui/layout/media_objects/stretched_to_fit.html
@@ -0,0 +1,25 @@
+<div class="flex">
+    <div class="mr-4 shrink-0">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="h-full w-16 border border-gray-300 bg-white text-gray-300"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+</div>
diff --git a/application_ui/layout/media_objects/wide_responsive.html b/application_ui/layout/media_objects/wide_responsive.html
new file mode 100644
index 0000000..c5e0bb6
--- /dev/null
+++ b/application_ui/layout/media_objects/wide_responsive.html
@@ -0,0 +1,25 @@
+<div class="sm:flex">
+    <div class="mb-4 shrink-0 sm:mr-4 sm:mb-0">
+        <svg
+            viewBox="0 0 200 200"
+            fill="none"
+            stroke="currentColor"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+            class="h-32 w-full border border-gray-300 bg-white text-gray-300 sm:w-32"
+        >
+            <path
+                d="M0 0l200 200M0 200L200 0"
+                stroke-width="1"
+                vector-effect="non-scaling-stroke"
+            />
+        </svg>
+    </div>
+    <div>
+        <h4 class="text-lg font-bold">Lorem ipsum</h4>
+        <p class="mt-1">
+            Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
+            expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
+        </p>
+    </div>
+</div>