Component Library
BadgePill
Rounded rectangle badges for labels, status indicators, and tags.
Default BadgeOutlined Badge
html
<BadgePill>Default Badge</BadgePill>
<BadgePill variant="outlined">Outlined Badge</BadgePill>Props:
| Prop | Type | Default | Options |
|---|---|---|---|
variant | string | "filled" | filled, outlined |
size | string | "md" | sm, md, lg |
Sizes
SmallMediumLarge
html
<BadgePill size="sm">Small</BadgePill>
<BadgePill size="md">Medium</BadgePill>
<BadgePill size="lg">Large</BadgePill>BorderedBox
Bordered containers for stamps, forms, and callout content.
Simple bordered content
Contact
hello@elliottregan.com
Contact
hello@elliottregan.com
html
<!-- Basic -->
<BorderedBox>Simple bordered content</BorderedBox>
<!-- With title -->
<BorderedBox title="Contact" variant="stamp">
hello@elliottregan.com
</BorderedBox>
<!-- Inverted title -->
<BorderedBox title="Contact" variant="stamp" inverted-title>
hello@elliottregan.com
</BorderedBox>Props:
| Prop | Type | Default | Options |
|---|---|---|---|
title | string | — | — |
variant | string | "default" | default, stamp, vertical |
invertedTitle | boolean | false | — |
Vertical Text
Frontend developer and UX designer based in the USA
html
<BorderedBox variant="vertical">
Frontend developer and UX designer based in the USA
</BorderedBox>Card
Flexible card container with CSS variables for individual padding control.
Default bordered card with equal padding.
Elevated card with shadow.
Filled card with background.
Flat card with no decoration.
html
<Card>Default bordered card</Card>
<Card variant="elevated">Elevated card with shadow</Card>
<Card variant="filled">Filled card with background</Card>
<Card variant="flat">Flat card with no decoration</Card>Props:
| Prop | Type | Default | Options |
|---|---|---|---|
variant | string | "bordered" | flat, bordered, elevated, filled |
CSS Variables:
| Variable | Default | Description |
|---|---|---|
--card-padding-top | var(--space-lg) | Top padding |
--card-padding-right | var(--space-lg) | Right padding |
--card-padding-bottom | var(--space-lg) | Bottom padding |
--card-padding-left | var(--space-lg) | Left padding |
--card-radius | var(--space-sm) | Border radius |
--card-background | transparent | Background color |
Custom Padding via CSS
Large equal padding on all sides.
More top padding, less bottom padding.
css
.card-large-padding {
--card-padding-top: var(--space-xl);
--card-padding-right: var(--space-xl);
--card-padding-bottom: var(--space-xl);
--card-padding-left: var(--space-xl);
}
.card-asymmetric {
--card-padding-top: var(--space-2xl);
--card-padding-bottom: var(--space-sm);
}html
<Card class="card-large-padding">Large padding</Card>
<Card class="card-asymmetric">Asymmetric padding</Card>Large padding
Asymmetric padding
html
<Card
:style="{ '--card-padding-left': 'var(--space-2xl)', '--card-radius': '1rem' }"
>
Override via inline style
</Card>AsideStack
Right-aligned vertically stacked text. Pairs well with DisclaimerGrid.
html
<AsideStack>
<span>Currently</span>
<span>based in</span>
<span>Virginia,</span>
<span>USA</span>
</AsideStack>DisclaimerGrid
Two-column grid layout (2/3 + 1/3) for disclaimer text with a figure slot.
html
<DisclaimerGrid>
Built with VitePress, html.js, and TypeScript.
<template #figure>
<span>Elliott Regan</span>
<strong>elliottregan.com</strong>
</template>
</DisclaimerGrid>Slots:
| Slot | Description |
|---|---|
default | Main disclaimer text |
figure | Right column content |
FooterGrid
Combines AsideStack + DisclaimerGrid with a side panel spanning both rows.
html
<FooterGrid>
<AsideStack>
<span>Available</span>
<span>for</span>
<span>freelance</span>
</AsideStack>
<DisclaimerGrid>
This portfolio showcases selected work.
<template #figure>
<strong>© 2024</strong>
</template>
</DisclaimerGrid>
<template #side>
<p>Stack | html, TypeScript, VitePress</p>
</template>
</FooterGrid>StatBlock
Display metrics and statistics with large values and labels.
15+
Years Experience
50+
Projects Shipped
10M+
Users Reached
html
<StatBlock value="15+" label="Years Experience" />
<StatBlock value="50+" label="Projects Shipped" />
<StatBlock value="10M+" label="Users Reached" />Props:
| Prop | Type | Default | Options |
|---|---|---|---|
value | string | — | — |
label | string | — | — |
variant | string | "default" | compact, default, large |
Size Variants
99%
Uptime
99%
Uptime
99%
Uptime
html
<StatBlock value="99%" label="Uptime" variant="compact" />
<StatBlock value="99%" label="Uptime" variant="default" />
<StatBlock value="99%" label="Uptime" variant="large" />