Blade Card component + two widgets that use the card component

card-body.blade.php

<div>
	<div class="card-body pt-1 bg-primary">
		<div class="mb-2 media">
			<x-card-title :items="$attributes->get('items')" :max="$attributes->get('max')"
							title="{{ $attributes->get('title') }}"
			/>
		</div>
		{{ $slot }}
	</div>
</div>

card-title.blade.php

@php
	$max = intval($attributes->get('max'));
	$items = $attributes->get('items');
@endphp
<div>
	<div class="d-flex">
		<div class="media-body text-left">
			<h3 class="primary">
@if (is_array($items) && is_int($max))
				{{ count($items) }} of {{ $max }}
@elseif (is_int($max))
				{{ $max }}
@else
@endif
			</h3>
			<span style="font-size: 1.3em">{{ $attributes->get('title') }}</span>
		</div>
		<div style="min-width: calc(25% - 4rem); padding: 1.5rem 0; align-self: end; text-align: center">
			<i style="font-size: 4rem" class="icon-book-open primary"></i>
		</div>
	</div>
</div>

card.blade.php

<div>
	<div class="col-md-4">
		<div class="card">
			<div class="card-content">
				<x-card-body :items="$attributes->get('items')" :max="$attributes->get('max')" title="{{ $attributes->get('title') }}">
					{{ $slot }}
				</x-card-body>
			</div>
		</div>
		</div>
</div>

family.blade.php

<div>
	<x-card title="Family Members" :items="$members" :max="$max">
		<div class="progress mt-3 mb-0" style="height: 7px;">
			<div class="progress-bar bg-primary" role="progressbar" style="{{ $style }}" aria-valuenow="80"
					 aria-valuemin="0" aria-valuemax="100" />
		</div>
	</x-card>
</div>

Family.php

<?php
namespace App\Widgets;

class Family extends Widget {
    /**
     * The configuration array.
     *
     * @var array
     */
    protected $config = [];
    
    public function run() {
        $members = ['A', 'B', 'C'];
		$max = 7;

		$percentage = (count($members) / $max) * 100;

		return view($this->view(), [
            'config' => $this->config,
			'members' => $members,
			'max' => $max,
			'style' => sprintf("width: %d%%", $percentage)
        ]);
    }
}

payments.blade.php

@php
	$list = ['A', 'B', 'C'];
	$max = 4;
	
	$style = sprintf("width: %d%%", (count($list) / $max) * 100);
@endphp
<div>
	<x-card title="Eligibility Term" :items="$list" :max="$max">
		<div class="progress mt-3 mb-0" style="height: 7px;">
			<div class="progress-bar bg-primary" role="progressbar" style="{{ $style }}" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" />
		</div>
	</x-card>
</div>

Payments.php

<?php
namespace App\Widgets;

class Payments extends Widget {
    /**
     * The configuration array.
     *
     * @var array
     */
    protected $config = [];
    
    public function run() {
        return view($this->view(), array ('config' => $this->config ));
    }
}

Widget.php

<?php
namespace App\Widgets;

use Arrilot\Widgets\AbstractWidget,
	Str;

class Widget extends AbstractWidget {
	private string $prefix = 'widgets';
    
	public function shouldBeDisplayed() {
        return true;
    }
    
	private function prefix(): string {
		return Str::finish(__NAMESPACE__, '\\');
	}

	private function prefixed(string $name): string {
		return Str::finish(Str::start( '.', $this->prefix), $name );
	}
	
	private function className(): string {
		return Str::after(get_class($this), $this->prefix());
	}

	protected function view(): string {
		return strtolower($this->prefixed($this->className()));
	}
}