This example serves as a boilerplate for a Hero component, which you typically see on the top of pages, containing a fullscreen image, title, text and optionally a button.

You can get the contents from anywhere, but here we assume you created 3 extra fields on the page table: hero_image, hero_title and hero_text. We also assume you have the Container component in your project.

Put the following code in a components/hero.blade.php file:

    'image' => page()->hero_image,
    'title' => page()->hero_title,
    'text' => page()->hero_text,

<div {{ $attributes->merge(['class' => 'aspect-w-9 aspect-h-12 xs:aspect-w-16 xs:aspect-h-14 sm:aspect-h-9 md:aspect-h-6 lg:aspect-h-4 xl:aspect-h-4']) }}>
    <x-img :src="$image" class="object-cover" />
    <div class="bg-black bg-opacity-50"></div>
    <x-container class="flex flex-col justify-center">
        <h1 class="text-4xl xs:text-5xl sm:text-6xl xl:text-7xl text-white font-serif mb-6">{{ $title }}</h1>
        <div class="max-w-xl text-white sm:text-lg leading-relaxed">{{ $text }}</div>


{{-- With the default page fields --}}
<x-hero />

{{-- With custom data, for example from a product --}}
<x-hero :image="$product->image" :title="$product->title" :text="$product->description" />
Previous topic
← Language Navigation
Next topic
Breadcrumbs →