src/components/list/ListMinimal.astro
---
interface Props {
items: string[];
}
const { items = ["Strategie & consultancy", "SEO & content marketing", "Google & Meta Ads", "Webdesign & development", "E-mail & marketing automation"] } = Astro.props;
---
<ul class="lst-min">
{items.map(item => (
<li class="lst-min__item">{item}</li>
))}
</ul>
<style>
:root {
--color-accent: #6366f1;
--color-primary: #0a0a0a;
}
.lst-min {
list-style: none;
margin: 0;
padding: 0;
}
.lst-min__item {
font-size: 1rem;
color: var(--color-primary);
padding: 0.65rem 0;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: space-between;
}
.lst-min__item:last-child { border-bottom: none; }
.lst-min__item::after {
content: '→';
color: var(--color-accent);
font-size: 0.9rem;
opacity: 0;
transition: opacity 0.2s;
}
.lst-min__item:hover::after { opacity: 1; }
</style>
Props
| Prop | Type | Default | Beschrijving |
|---|---|---|---|
items * | string[] | — | Lijst items |
* = verplicht