47 lines
1021 B
Svelte
47 lines
1021 B
Svelte
|
|
<script lang="ts">
|
|
export let TitelName: string;
|
|
export let BulletPoints: [string, boolean][];
|
|
</script>
|
|
|
|
<div class="border rounded-xl mb-6">
|
|
<div class="flex flex-row w-full bg-secondary rounded-t-3xl pl-5 pt-1 pb-1">
|
|
<h3 class="text-white">{TitelName}</h3>
|
|
</div>
|
|
|
|
<div class="bg-white">
|
|
<div class="white">
|
|
{#each BulletPoints as [point]}
|
|
<div class="services">
|
|
<ul class="custom-list pl-6 space-y-2"><li>{point}</li></ul>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.white {
|
|
@apply text-center text-black p-6;
|
|
}
|
|
|
|
.services {
|
|
@apply text-start py-2;
|
|
}
|
|
.services:not(:last-child) {
|
|
@apply border-b-[0px] border-gray-300;
|
|
}
|
|
|
|
.custom-list {
|
|
@apply list-none pl-6; /* Entfernt Standardpunkte */
|
|
|
|
li {
|
|
@apply relative text-gray-700 text-lg list-none; /* Entfernt Standardpunkte */
|
|
|
|
&::before {
|
|
@apply absolute left-[-1.5rem] top-[0.4rem] w-3 h-3 bg-primary content-[""];
|
|
/* Quadrat mit `w-2`, `h-2`, orange Hintergrund */
|
|
}
|
|
}
|
|
}
|
|
</style> |