Logo
Animated SVG logo component that transitions between "SD" and "$D" every 4 seconds, synchronized with the SmartDebt component animation. The logo automatically adapts to the current theme (light/dark) and uses the theme's primary brand color.
Theme-Aware
The logo automatically adapts to light and dark themes, using the theme's primary brand color (hsl(var(--primary))) for the background and primary-foreground color for the text.
<Logo /> Brand Color Integration
The logo uses CSS variables to match your theme's brand color, ensuring consistent branding across all color schemes (blue, green, gold).
<Logo delay={2000} /> Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "light" | "dark" | deprecated | Deprecated: Logo now automatically adapts to theme. This prop is ignored. |
class | string | "" | Additional CSS classes to apply to the logo |
delay | number | random 0-4000ms | Optional delay in milliseconds before starting animation (0-4000ms). If not provided, random between 0-4000ms. |
Talbot Stevens Assets
Brand assets for Talbot Stevens personal brand sites.
Header Variants
Customized headers with "Talbot Stevens" branding. The header component supports optional tagline and background color customization.
With Tagline
Without Tagline
TS Logo (Light)
Static "TS" logo for Talbot Stevens branding. Adapts to theme colors.
<TSLogo /> TS Logo (Dark)
Dark mode variant automatically uses theme foreground color.
<TSLogo /> Favicon
Transparent background with brand-colored text.
$MART DEBT Entity
Branded text component where "SMART DEBT" animates with S ⟷ $ transformation. All instances cycle together every 4 seconds. SEO-preserved the HTML always contains "SMART DEBT" plus optional entity text.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
entity | string | undefined | Optional entity text appended after "SMART DEBT" (e.g., "Coach", "Strategies", "Mission") |
delay | number | random 0-4000ms | Delay in milliseconds before starting the animation cycle (0-4000ms). If not provided, each instance gets a random delay between 0-4000ms so they start at different times. |
Usage
import SmartDebt from "../components/brand/SmartDebt.astro";
<SmartDebt /> // "SMART DEBT" (random delay 0-4000ms)
<SmartDebt entity="Coach" /> // "SMART DEBT Coach" (random delay)
<SmartDebt entity="Strategies" /> // "SMART DEBT Strategies" (random delay)
<SmartDebt delay={2000} /> // "SMART DEBT" (starts after 2 seconds)
<SmartDebt entity="Plan" delay={0} /> // "SMART DEBT Plan" (starts immediately)
💡 Unique Implementation: This component uses a
vanilla JavaScript Web Component (smart-debt-element), not Astro or Alpine.js. It's a custom element that provides
framework-agnostic functionality with SEO preservation and
accessibility features.
SMART DEBT Plan
Client-first
-
SMART DEBT Coach website SMART DEBT App (mini-app)- White paper: mission, win-win-win future
SMART DEBT Myths eBooklet-
SMART DEBT Insights (blog, video, audio) -
SMART DEBT Academy (Certification courses) - Education and Marketing solutions
-
SMART DEBT Coaching (training, speaking, consulting) -
SMART DEBT Wealth (investment and credit products)
More ...
Versatile "More ..." link functionality that adapts to three different modes: Manual Inline (hides text inside paragraph), Auto-Block (truncates content by height), and Simple Link (standard anchor).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | undefined | If provided, component renders as a standard <a> link. Example: href="/about" |
lines | number | undefined | If provided, truncates the wrapped content to this
number of lines (approximate) using max-height. Example: lines={3} (note the
curly braces for number values) |
label | string | "More ..." | The text for the link or button when collapsed. |
labelExpanded | string | "Less" | The text for the button when expanded (Inline/Block modes only). |
1. Manual Inline Mode
Use Case: You have a paragraph where you want some initial content visible, and the rest hidden until the user clicks the More... link
This is a very long paragraph, that is truncated here,
<p>
This is a very long paragraph, that is truncated here,
<More>
so that only viewers who want to see all of the content...
</More>
</p>
2. Auto-Block Mode
Use Case: You have a long section (like a bio or a list) and you want to cap it at a specific height (e.g., 3 lines) with a fade-out effect.
Author Bio (Default Label)
Jane Doe is a senior engineer with over 20 years of experience. She has contributed to major open source projects and speaks at conferences worldwide regarding distributed systems architecture.
She currently lives in Toronto with her two cats.
Author Bio (Custom Label)
Jane Doe is a senior engineer with over 20 years of experience. She has contributed to major open source projects and speaks at conferences worldwide regarding distributed systems architecture.
She currently lives in Toronto with her two cats.
<More lines={3}>
<p>Jane Doe is a senior engineer...</p>
</More>
<More lines={3} label="Full bio" labelExpanded="Close bio">
<p>Jane Doe is a senior engineer...</p>
</More>
3. Simple Link Mode
Use Case: A standard link styled consistently with the expanders.
Interested in learning more about our company? More ...
<p>
Interested in learning more about our company?
<More href="/about" />
</p>
Typewriter
Animated typewriter effect that cycles through text character by character. Integrates seamlessly with SmartDebt branding and inherits all typography from parent element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
dynamicText | string[] | ["one", "two", "three"] | Array of strings to cycle through with typewriter effect |
typingDelay | number | 100 | Delay in ms between typing each character. Example: typingDelay={150} |
deletingDelay | number | 50 | Delay in ms between deleting each character (faster than typing) |
dynamicTextDuration | number | 2000 | How long to display complete text before starting to delete |
pauseBeforeNext | number | 500 | Pause after deleting before typing next string |
cursorChar | string | "|" | Character to use for blinking cursor |
showCursor | boolean | true | Whether to show the blinking cursor |
dynamicTextClass | string | undefined | CSS class(es) to apply to the dynamic text element.
Use this to style the typed text (e.g.,
dynamicTextClass="smart-debt-entity" to
match SmartDebt entity styling) |
1. SmartDebt Entities
Showcase all $MART DEBT entities with typewriter effect. The S→$ animation runs independently while entity names cycle. Cursor is hidden for a cleaner look.
SMART DEBT
<h1>
<Typewriter
dynamicText={["Coach", "Insights", "Strategies", "Community", "Myths", "App", "Academy"]}
typingDelay={100}
dynamicTextDuration={2000}
dynamicTextClass="smart-debt-entity"
showCursor={false}
>
<SmartDebt delay={0} />
</Typewriter>
</h1>
2. Hero Title
Use in hero sections with static initial text and dynamic phrases.
Build wealth with
<h1>
Build wealth with
<Typewriter
dynamicText={["smart strategies", "proven methods", "expert guidance"]}
/>
</h1>
Tabs
Simple tabs component using Alpine state. Keyboard and ARIA friendly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array of objects | [] | Array of tab items: {id: string, label: string,
content: string} |
Accordion
Accessible accordion with smooth transitions. Single or multiple open.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array of objects | [] | Array of accordion items: {id: string, title: string,
content: string} |
Buttons
Versatile button component with 6 variants and 4 sizes for different use cases.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" |
"destructive" | "link" | "default" | Visual style variant of the button |
size | "sm" | "default" | "lg" | "icon" | "default" | Size of the button |
disabled | boolean | false | Whether the button is disabled |
class | string | "" | Additional CSS classes |
Variants
Sizes
States
Search
Full-featured site search powered by Pagefind. Opens in a modal dialog with keyboard shortcuts (Ctrl+K/Cmd+K), search result highlighting, and full dark mode support. Automatically indexes all static and markdown/MDX pages during build.
🔍 Technology: This component uses Pagefind , a client-side search library for static sites. Pagefind provides fast, typo-tolerant search with result highlighting, automatic indexing during build, and zero runtime dependencies. The search modal is fully accessible with ARIA labels, keyboard navigation, and focus management.
Interactive Demo
Features
- Keyboard shortcut: Ctrl+K / Cmd+K
- Press Esc to close the search modal
- Search result highlighting on selected pages
- Full dark mode support
- Fully accessible with ARIA labels
- Automatic indexing of all static and markdown/MDX pages
- Typo-tolerant search with fuzzy matching
- Zero runtime dependencies (client-side only)
Layout Components
Structural components for organizing page content and controlling responsive behavior.
Container
Controls maximum width and centers content. Available in "text" (25-100rem), "content" (20-90rem), and "full" sizes.
Section
Adds vertical spacing between content areas. Supports 9 spacing levels from "xs" to "5xl" using fluid design tokens.
Grid
Responsive CSS Grid system that collapses to 1 column on mobile. Supports 1-12 columns with 4 gap sizes.
Cards
Container components with consistent styling for grouping related content.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
style | "none" | "header" | "none" | Card style variant. "header" adds a colored header section with white text (primary color background) |
backgroundColor | string | undefined | Custom background color (e.g., "#ececec"). Defaults to "#ececec" when style="header" |
class | string | "" | Additional CSS classes |
Usage
import Card from "../components/ui/Card.astro";
// Default card
<Card>Content</Card>
// Header style with default background
<Card style="header">
<h2 slot="title">Title</h2>
Content
</Card>
// Header style with custom background
<Card style="header" backgroundColor="#f0f0f0">
<h2 slot="title">Title</h2>
Content
</Card>
Card Example 1
Simple card for organizing content with consistent styling and shadow.
Card Example 2
Cards automatically adapt to grid layouts and work at all breakpoints.
Card Example 3
Perfect for product listings, testimonials, or feature highlights.
Badges
Small labels for tagging and categorizing content with multiple style variants.
Alerts
Inline notification messages for contextual feedback. For page-level notifications with positioning, use Banner component.
✓ Success: Your changes have been saved successfully.
✕ Error: Unable to process your request. Please try again.
Note: For page-level notifications with fixed positioning (top/bottom), use the Banner component instead.
Form Components
Complete form components for creating accessible and functional input forms.
Labels
Accessible form labels properly associated with inputs.
Separators
Visual dividers for separating content sections.
Content before
Content after
Interactive Components
Components for user interaction and control.
Dropdown Menu
Customizable dropdown menu with positioning options.
Switch Toggle
Accessible toggle switches for boolean settings.
Feedback & Notifications
Components for communicating with users through banners, modals, and alerts.
Banner
Sticky banners positioned above or below header. All dismissible.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "warning" | "success" | "alert" |
"highlight" | "highlight" | Visual style variant of the banner |
position | "above-header" | "below-header" | "below-header" | Position of the banner relative to the header |
dismissible | boolean | true | Whether the banner can be dismissed by the user |
id | string | auto-generated | Unique ID for the banner (used for localStorage persistence) |
class | string | "" | Additional CSS classes |
Variants
All banner variants can be positioned above or below the header:
-
info- Informational (blue/primary color) -
warning- Warning (orange/warning color) success- Success (green)-
alert- Alert/error (red/destructive) -
highlight- Special offer/highlight (accent color)
Page-Level Demo Banners:
Test Above Header:
Test Below Header:
Modal
Overlayed dialog box with close and action buttons. Test different delay variants.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Modal" | Modal title/heading text |
delay | number | 5000 | Delay in milliseconds before showing the modal (default: 5 seconds) |
dismissible | boolean | true | Whether the modal can be closed by the user |
backdrop | boolean | true | Whether to show the backdrop overlay |
size | "sm" | "md" | "lg" | "md" | Size of the modal dialog |
id | string | auto-generated | Unique ID for the modal (used for programmatic control) |
class | string | "" | Additional CSS classes |
Manual Triggers: