adding layout

2 weeks ago · bfc201b7a4
parent 6e8ab2c8a2
commit bfc201b7a4
38 changed files with 633 additions and 0 deletions
--- a/application_ui/layout/cards/basic_card.html
+++ 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>
--- a/application_ui/layout/cards/card_edge_to_edge_on_mobile.html
+++ 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>
--- a/application_ui/layout/cards/card_with_footer.html
+++ 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>
--- a/application_ui/layout/cards/card_with_gray_body.html
+++ 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>
--- a/application_ui/layout/cards/card_with_gray_footer.html
+++ 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>
--- a/application_ui/layout/cards/card_with_header.html
+++ 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>
--- a/application_ui/layout/cards/card_with_heeader_and_footer.html
+++ 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>
--- a/application_ui/layout/cards/well.html
+++ 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>
--- a/application_ui/layout/cards/well_edge_to_edge_on_mobile.html
+++ 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>
--- a/application_ui/layout/cards/well_on_gray.html
+++ 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>
--- a/application_ui/layout/containers/constrained_to_br_with_padded_content.html
+++ 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>
--- a/application_ui/layout/containers/constrained_with_padded_content.html
+++ 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>
--- 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
@ -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>
--- 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
@ -0,0 +1,3 @@
 <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
    <!-- Content goes here -->
 </div>
--- a/application_ui/layout/containers/narrow_constrained_with_padded_content.html
+++ 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>
--- a/application_ui/layout/dividers/with_button.html
+++ 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>
--- a/application_ui/layout/dividers/with_icon.html
+++ 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>
--- a/application_ui/layout/dividers/with_label.html
+++ 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>
--- a/application_ui/layout/dividers/with_label_on_left.html
+++ 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>
--- a/application_ui/layout/dividers/with_title.html
+++ 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>
--- a/application_ui/layout/dividers/with_title_and_button.html
+++ 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>
--- a/application_ui/layout/dividers/with_title_on_left.html
+++ 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>
--- a/application_ui/layout/dividers/with_toolbar.html
+++ 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>
--- a/application_ui/layout/list_containers/card_with_dividers.html
+++ 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>
--- 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
@ -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>
--- a/application_ui/layout/list_containers/flat_card_with_dividers.html
+++ 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>
--- a/application_ui/layout/list_containers/separate_cards.html
+++ 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>
--- 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
@ -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>
--- a/application_ui/layout/list_containers/simple_with_dividers.html
+++ 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>
--- 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
@ -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>
--- a/application_ui/layout/media_objects/aligned_to_bottom.html
+++ 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>
--- a/application_ui/layout/media_objects/aligned_to_center.html
+++ 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>
--- a/application_ui/layout/media_objects/basic.html
+++ 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>
--- a/application_ui/layout/media_objects/basic_responsive.html
+++ 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>
--- a/application_ui/layout/media_objects/media_on_right.html
+++ 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>
--- a/application_ui/layout/media_objects/nested.html
+++ 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>
--- a/application_ui/layout/media_objects/stretched_to_fit.html
+++ 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>
--- a/application_ui/layout/media_objects/wide_responsive.html
+++ 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>