EUIKit

Sections

The <x-euikit::section> component can show structured content with an optional slots for a header and footer. The content inside a section is rendered inside a roundrect, with subtle shading and a prominent drop shadow. This content is in a <x-euikit::section> component.

Margins are added to the section component, which differs from most EUIKit components. This component is designed to be the top-level element for page content.

The component has no attributes (but attributes can be used — see below), but can utilize two slots to show headers and footers:

Slot	Description
header	Optional. Placed at the top of the section in a rounded-rect.
(main)	The main slot is the contents of the section. It is the default slot and does not need to be specified.
footer	Optional. Placed underneath the body of the section in a rounded-rect.

The header and footer slots can take icons using the lefticon and righticon attributes. The icon will be rendered with the @svg() Blade directive, so any icon pack in Blade Icons can be used. EUIKit supports Heroicons by default.

Alternative headers and footers

In the case of a section that is just text with no icons, a simpler syntax may be used. The header and footer can be given as attributes to the section component directly:

<x-euikit::section header="Simple Header" footer="Simple Footer">
    (content)
</x-euikit::section>

Using the slot syntax is encouraged, as it works properly with or without icons.

This section only has a footer, with a right footer icon.

Code:

<x-euikit::section>
    <p class="mb-4">This section only has a footer, with a right footer icon.</p>
        <x-slot:footer righticon="heroicon-o-cube-transparent">
            &copy; Eric A. Farris
        </x-slot:footer>
</x-euikit::section>

This section has neither header nor footer.