Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

Media

Align images with text

x-t-media
Slug: media

Preview and Examples

Suspendisse et pretium

Sed id tortor eu sem lobortis convallis non sit amet felis. Nam vestibulum et est pellentesque tempor.

<x-t-media size="xl">
    <x-slot:thumbnail>
        <img src="https://picsum.photos/150"/>
    </x-slot:thumbnail>
    <x-slot:title>
        <x-t-text
            level="3"
            size="sm"
        >
            Suspendisse et pretium
        </x-t-text>
    </x-slot:title>
    <x-slot:description>
        <x-t-text
            size="sm"
            class="mb-0"
        >
            Sed id tortor eu sem lobortis convallis non sit amet felis. Nam vestibulum et est pellentesque tempor.
        </x-t-text>
    </x-slot:description>
</x-t-media>

Attributes

Name Type Options Description
accent boolean
true false
Adds an accent
border boolean
true false
Adds a border
full boolean
true false
Makes full width
hollow boolean
true false
Removes background colour
ring boolean
true false
Adds a ring
rounded boolean
true false
Adds rounded corners
shadow boolean
true false
Adds a shadow
size string
xs sm md lg xl 2xl
Controls component scale
variant string
default brand primary secondary success warning danger light dark
A variant is like a colour palette