netgescon-day0/resources/views/components/netgescon/two-cards.blade.php

57 lines
1.7 KiB
PHP

@props([
'leftTitle' => null,
'rightTitle' => null,
])
<div class="netgescon-two-cards">
<div class="netgescon-card h-100">
@if($leftTitle)
<div class="netgescon-card-header"><strong>{!! $leftTitle !!}</strong></div>
@endif
<div class="netgescon-card-body">
{{ $left ?? '' }}
</div>
</div>
<div class="netgescon-card h-100">
@if($rightTitle)
<div class="netgescon-card-header"><strong>{!! $rightTitle !!}</strong></div>
@endif
<div class="netgescon-card-body">
{{ $right ?? '' }}
</div>
</div>
</div>
<style>
.netgescon-two-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 991px){ .netgescon-two-cards{ grid-template-columns: 1fr; } }
.netgescon-two-cards .netgescon-card{ display:flex; flex-direction:column; }
.netgescon-two-cards .netgescon-card-body{ flex:1 1 auto; }
</style>
@props(['leftTitle' => null, 'rightTitle' => null])
<div class="grid md:grid-cols-2 gap-3 items-start">
<div class="netgescon-card h-100">
@if($leftTitle)
<div class="p-2 bg-slate-50 border-b">
<strong>{{ $leftTitle }}</strong>
</div>
@endif
<div class="p-2">
{{ $left ?? $slotLeft ?? '' }}
</div>
</div>
<div class="netgescon-card h-100">
@if($rightTitle)
<div class="p-2 bg-slate-50 border-b">
<strong>{{ $rightTitle }}</strong>
</div>
@endif
<div class="p-2">
{{ $right ?? $slotRight ?? '' }}
</div>
</div>
</div>
<style>
/* Equalize heights even with variable content; fallback via min-height for known sections */
.grid.items-start > .netgescon-card { align-self: stretch; }
</style>