EUIKit

Card

EUIKit ships with a two-column card component, <x-euikit::card-2column>, that can be used to help break up long forms or information. The card uses "left" and "right" slots. The left slot is 1/3 the width of the card, leaving 2/3 for the right slot. Typically, the left slot will contain a section heading or type text, and the right side will contain the corresponding information or fields.

Slot	Description
`left`	Left-hand side of the card
`right`	Right-hand side of the card

Example

Example card

Given Names

Last Name

Attending Physician

Appointment date and time

Insurance

Code:

 <x-euikit::card-2column>
    <x-slot:left>
        Example card
    </x-slot:left>
    <x-slot:right>
        <x-euikit::grid-6>
            (form fields)
        </x-euikit::grid-6>
    </x-slot:right>
</x-euikit::card-2column>