cards.md

Cards

Case

Usage

parameters

**$title** - string
**$categorie** - string
**$slot** - string ---

<x-cases.card>
  <x-slot:title>Motorcycles United</x-slot:title>
  <!--Can be left empty-->
  <x-slot:style>Additional option for styling the image</x-slot:style>

  Text here will be placed in the subtext p tag.

  <x-slot:image>  URL TO IMAGE  </x-slot:image>
  <x-slot:url>  URL TO DESITINATION </x-slot:url>
</x-cases.card>

Structure

<div class="project-card">
    <div class="project-card-container">
        <div class="category-span-position">
            <span class="category-span">
                {{$categorie}}
            </span>
        </div>
        <!-- -->
        @if ($style->isNotEmpty())
            <div class="project-card-container-image {{$style}}">
                @else
                    <div class="project-card-container-image">
                        @endif
                        <img class="project-card-container-image-style" src="{{$image}}" alt="">
                    </div>
                    <div class="project-card-content-container">
                        <p class="project-card-content-title">{{$title}}</p>
                        <p class="project-card-content-subtext">{{ substr($slot ?? '', 0,50)}}...</p>
                        <div class="project-card-redirect">
                            <a href="#">
                                <x-ui.buttons.small.alternative-outline>
                                    Website bezoeken
                                </x-ui.buttons.small.alternative-outline>
                            </a>
                        </div>
                    </div>
            </div>
    </div>
</div>

Consult

parameters

**$title** - string
**$slot** - string --- ### Usage ```blade CARD TITLE SLOT TEXT GOES HERE ```

Structure

<div class="consult-card">
    <div class="consult-card-container">
        <h1 class="consult-card-title">{{$title}}</h1>
        <p class="consult-card-content">{{$slot}} </p>
    </div>
</div>

Explanatory

parameters

**$title** - string
**$slot** - string --- ### Usage ```blade TITLE GOES HERE SLOT TEXT GOES HERE

ROUTE TO DESITINATION ```

Structure

<div class="explanatory-card">
    <div class="explanatory-card-content">
        <h3 class="explanatory-card-title">{{$title}}</h3>
        <p class="explanatory-card-sub">{{$slot}}</p>
    </div>
    <div class="inline-block bottom-0">
        <div class="explanatory-card-url">
            <a href="{{$url}}">
                <x-ui.buttons.small.primary>
                    Meer lezen
                </x-ui.buttons.small.primary>
            </a>
        </div>
        <div class="explanatory-card-image">
            {{$image}}
        </div>
    </div>
</div>