Advanced features including responsive slideshows, utility helpers, content components, and icon libraries.
Create engaging, touch-friendly slideshows that work perfectly across all devices. Built with modern CSS and JavaScript, no external dependencies required.
<div class="slideshow">
<div class="slideshow-container">
<div class="slide active">
<img src="https://picsum.photos/800/600?random=1" alt="Slide 1">
<div class="slide-content">
<h3>Slide Title</h3>
<p>Slide description content.</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/800/600?random=2" alt="Slide 2">
<div class="slide-content">
<h3>Another Slide</h3>
<p>More content here.</p>
</div>
</div>
<button class="slide-prev" onclick="changeSlide(-1)">‹</button>
<button class="slide-next" onclick="changeSlide(1)">›</button>
</div>
<div class="slide-nav">
<span class="slide-dot active" onclick="currentSlide(1)"></span>
<span class="slide-dot" onclick="currentSlide(2)"></span>
</div>
</div>let slideIndex = 1;
function changeSlide(n) {
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.slide-dot');
if (n > slides.length) slideIndex = 1;
if (n < 1) slideIndex = slides.length;
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
slides[slideIndex - 1].classList.add('active');
dots[slideIndex - 1].classList.add('active');
}Comprehensive utility classes for rapid development. These shorthand classes help you prototype faster and maintain consistent spacing, typography, and layout patterns.
Control margin and padding with precise spacing utilities. Uses a consistent scale for predictable layouts.
.mt-1 to .mt-5.mb-1 to .mb-5.ml-1 to .ml-5.mr-1 to .mr-5
.pt-1 to .pt-5.pb-1 to .pb-5.pl-1 to .pl-5.pr-1 to .pr-5
.text-left.text-center.text-right.text-justify
.text-uppercase.text-lowercase.text-capitalize
.d-none.d-block.d-inline.d-flex.d-grid
.justify-start.justify-center.justify-end.justify-between
.align-start.align-center.align-end.align-stretch
.border.rounded.shadow.shadow-lg
<!-- Spacing Examples -->
<div class="mt-3 mb-4 pl-2">Margin top 3, bottom 4, padding left 2</div>
<!-- Flexbox Layout -->
<div class="d-flex justify-between align-center">
<span>Left side</span>
<span>Right side</span>
</div>
<!-- Text Utilities -->
<p class="text-center text-uppercase text-bold">Centered, uppercase, bold text</p>
<!-- Visual Styling -->
<div class="border rounded shadow-md bg-light p-3">
Styled container with border, rounded corners, shadow, and padding
</div>Pre-built content components for common UI patterns. These reusable components help maintain consistency across your project.
.alert .alert-success.alert .alert-warning.alert .alert-danger
.card.card-header.card-body.card-footer
.badge .badge-primary.badge .badge-success.badge .badge-danger
.progress.progress-bar
<!-- Alert Component -->
<div class="alert alert-success">
<strong>Success!</strong> Your action was completed.
</div>
<!-- Card Component -->
<div class="card">
<div class="card-header">
<h5>Card Title</h5>
</div>
<div class="card-body">
<p>Card content goes here.</p>
</div>
<div class="card-footer">
<button class="btn btn-primary">Action</button>
</div>
</div>
<!-- Badges -->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<!-- Progress Bar -->
<div class="progress">
<div class="progress-bar" style="width: 60%"></div>
</div>Pea.rs are common patterns of markup & style for frequently used UI elements. Originally inspired by pea.rs, these patterns provide semantic, accessible, and beautifully styled components.
Display statistics horizontally with clear visual separation. Perfect for dashboards, profiles, and summaries.
<ul class="stats">
<li>
<span class="stat-value">1,234</span>
<span class="stat-label">Downloads</span>
</li>
<li>
<span class="stat-value">567</span>
<span class="stat-label">Contributors</span>
</li>
<li>
<span class="stat-value">23,456</span>
<span class="stat-label">Stars</span>
</li>
</ul>Vertical list items with optional images and metadata. Ideal for article listings, product catalogs, and search results.
<ul class="slats slats--with-image">
<li>
<a href="#">
<img src="article-image.jpg" alt="Article thumbnail">
<div class="content">
<h4>Article Title</h4>
<p>Article description text here.</p>
<span class="meta">5 min read • Nov 2025</span>
</div>
</a>
</li>
</ul>Sidebar content that floats alongside main content. Use for supplementary information, navigation, or callouts.
Combine the aside pattern with sticky positioning to keep supplementary content visible as users scroll through your main content.
<!-- Grid-based aside layout -->
<div class="content-with-aside">
<aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">Examples</a></li>
</ul>
</aside>
<main>
<!-- Main content here -->
</main>
</div>
<!-- Callout box -->
<div class="aside-callout">
<h4>Note</h4>
<p>Important information goes here.</p>
</div>Amphibious 2.0 uses Lucide icons, a beautiful & consistent icon set designed for modern web applications. All icons are optimized SVGs that scale perfectly at any size.
Icons are included as SVG elements and can be styled with CSS. The icon system provides consistent sizing, colors, and spacing.
<!-- Basic Icon -->
<svg class="icon" viewBox="0 0 24 24">
<path d="M9 12l2 2 4-4"></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
<!-- Sized Icons -->
<svg class="icon icon-sm" viewBox="...">...</svg>
<svg class="icon icon-lg" viewBox="...">...</svg>
<svg class="icon icon-xl" viewBox="...">...</svg>
<!-- Colored Icons -->
<svg class="icon text-primary" viewBox="...">...</svg>
<svg class="icon text-success" viewBox="...">...</svg>
<svg class="icon text-danger" viewBox="...">...</svg>
<!-- Icons in Buttons -->
<button class="btn btn-primary">
<svg class="icon icon-sm">...</svg>
Save Changes
</button>Amphibious 2.0 is designed to work seamlessly with the Lucide icon library. You can find the complete icon set and usage instructions at lucide.dev.
// Install Lucide via npm
npm install lucide
// Or include via CDN
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
// Initialize icons
lucide.createIcons();