šØ Themes
Semantic & Supplementary Elements
Aside Elements (Sidebar/Supplementary Content)
Key Points: Asides are supplementary content blocks. Use CSS classes to control positioning: float-start/left (floats left, 40% max-width), float-end/right (floats right, 40% max-width, default), or text-center/center (block display, centered, full width). Images inside asides auto-constrain to 100% of aside width with rounded corners and bottom margin.
Aside with Float Right (Default)
This is main content that will have an aside floating to the right beside it on desktop screens. On smaller screens, the aside appears below the main content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Aside with Float Left
This is main content that will have an aside floating to the left beside it on desktop screens. Notice how the text wraps around the aside element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Aside Centered (Block Display)
This is main content. The aside below displays as a centered block that clears floats and spans appropriate width.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Aside with Image (Float Right)
This example shows an aside with an embedded image. Images automatically constrain to 100% of the aside width and are displayed with auto height and rounded corners.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Aside with Image (Centered Block)
This example shows a centered aside block containing an image. The image is centered and constrained to aside width.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Figure & Figcaption (Image with Caption)
Details & Summary (Disclosure Elements)
Click to expand: What is Lorem Ipsum?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
This section is open by default
This details element has the 'open' attribute, so it appears expanded when the page loads. Users can click the summary to collapse it.
Address Element (Contact Information)
Alderpen Media, Inc.contact@alderpen.com
+1 (555) 123-4567
123 Main Street
Springfield, IL 62701
thehomeworkdad.com
Abbreviations & Acronyms
HTML is the standard markup language for creating web pages.
The W3C sets web standards and best practices.
CSS is used for styling and layout.
Time Element (Semantic Dates)
Published on
Last updated
Callout Boxes (Emphasis)
Typography & Text Elements
Headings
Heading 1 — Display Large
Heading 2 — Display Medium
Heading 3 — Display Small
Heading 4 — Subheading
Heading 5 — Section Title
Heading 6 — Minor Heading
Text Emphasis
Bold text — For important content
Italic text — For emphasis or citations
Highlighted text — For important callouts
Small text — For fine print or secondary info
Text with subscript and superscript
Underlined text — Rarely used
Strikethrough text — For deleted content
Paragraphs
This is a lead paragraph. It stands out from regular paragraphs with larger text and increased line height for emphasis at the beginning of a section.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Another paragraph with normal styling. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Text Utilities & Colors
Muted text (secondary color)
Success text (green)
Danger text (red)
Warning text (yellow)
Info text (blue)
Primary text (brand color)
Secondary text
Light text
Dark text
Center aligned text
Right aligned text
Blockquotes & Quotes (V9.1 System)
Overview: Five CSS-only blockquote variations controlled entirely by skin file variables. All colors automatically adapt to the selected theme. Classes available: .quote-box, .quote-card, .quote-card-badge, .quote-alert with color variants, and .quote-avatar.
1. Quote Box (Left Border - Stacked)
Use class: .quote-box — Best for stacking multiple quotes or testimonials with a clean left border accent.
"If it's a good idea, go ahead and do it. It's much easier to apologize than it is to get permission."
"Science and everyday life cannot and should not be separated."
"Science makes people reach selflessly for truth and objectivity; it teaches people to accept reality, with wonder and admiration, not to mention the deep awe and joy that the natural order of things brings to the true scientist."
2. Quote Card (Centered with Icon Badge)
Use class: .quote-card with nested .icon-wrapper — Best for featuring a single prominent quote with an icon badge at the top.
"The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle."
3. Quote Card Badge (Overlapping Icon)
Use class: .quote-card-badge with nested .icon-wrapper — Modern card design with badge-style icon overlapping the top edge.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere, molestias quisquam impedit inventore."
4. Quote Alerts (Full-Color Background)
Use classes: .quote-alert .quote-alert-primary, .quote-alert-secondary, .quote-alert-success, .quote-alert-danger, .quote-alert-warning, .quote-alert-info — Full-color background quotes with contrasting footer box.
"Excellence is not a destination; it is a continuous journey that never ends."
"Success is not final, failure is not fatal: it is the courage to continue that counts."
"The way to get started is to quit talking and begin doing."
"Don't watch the clock; do what it does. Keep going."
"The future belongs to those who believe in the beauty of their dreams."
"It is during our darkest moments that we must focus to see the light."
5. Quote Avatar (With Author Photo)
Use classes: .quote-avatar (outer container) and .quote-avatar-card (inner card) with <img class="avatar"> — Testimonials with circular author avatar.
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere molestias quisquam impedit inventore."
6. Simple Blockquote Classes (Direct Styling)
Add simple, single-word classes directly to the <blockquote> element. Nested <footer> elements automatically inherit appropriate styling without needing any classes.
Default Blockquote (No Class)
Use for simple quotations without special emphasis.
"The only way to do great work is to love what you do."
Callout
Use for attention-grabbing quotes, pull quotes, or key takeaways.
"Science and everyday life cannot and should not be separated."
Highlight
Use for important quotes needing visual emphasis.
"If it's a good idea, go ahead and do it. It's much easier to apologize than it is to get permission."
Featured
Use for hero quotes or showcase testimonials.
"The future belongs to those who believe in the beauty of their dreams."
Verse
Use for Bible verses, poetry, or scripture quotations.
For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.
Article / Webpage
Use for quotes from articles or web pages with URL citations (.article and .webpage are synonyms).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere.
Lists
Unordered List
- First item in list
- Second item in list
- Nested item 1
- Nested item 2
- Third item in list
Ordered List
- First step
- Second step
- Sub-step 1
- Sub-step 2
- Third step
Definition List
- Definition term 1
- Definition description for term 1. Provides detailed explanation of the term.
- Definition term 2
- Definition description for term 2. Another explanation with more detail.
Unstyled List
- Item without bullet
- Another item without styling
- List items here
Inline List
- Inline item 1
- Inline item 2
- Inline item 3
Tables
Bare Table Elements (No Class Required)
Tables render beautifully without any classes. Just use plain <table> elements and they automatically get theme-aware styling with navbar color headers and skin-specific shadows and striping.
Bare Table (No Class)
Plain HTML table with automatic theme-aware header color and styling.
| ID | Product | Price | Stock |
|---|---|---|---|
| P001 | Widget A | $29.99 | 157 |
| P002 | Widget B | $39.99 | 203 |
| P003 | Gadget X | $49.99 | 89 |
Bare Table with .callout Class
Add class="callout" to any bare table for branded styling.
| Month | Sales | Growth | Target |
|---|---|---|---|
| January | $58,000 | +12% | $50,000 |
| February | $64,500 | +11.2% | $55,000 |
| March | $71,200 | +10.4% | $60,000 |
Table Classes with .table Class (Traditional Bootstrap)
For Bootstrap compatibility, you can use class="table" with additional single-word classes. These classes use the same color variables as blockquotes for unified theming. Choose the class that best fits your content type.
Default Table (.table)
Professional data presentation with theme-aware header color (navbar color) and striped rows. Shadow and hover effects adapt to the selected skin.
| ID | Name | Status | |
|---|---|---|---|
| 001 | John Smith | john@example.com | Active |
| 002 | Sarah Johnson | sarah@example.com | Active |
| 003 | Michael Brown | michael@example.com | Pending |
Callout Table (.table.callout)
Attention-grabbing table with branded header using navbar color. Includes row highlight on hover.
| Metric | Q1 2025 | Q2 2025 | Q3 2025 |
|---|---|---|---|
| Revenue | $125,000 | $142,000 | $168,000 |
| Growth | 0% | 13.6% | 18.3% |
| Customers | 542 | 618 | 734 |
Highlight Table (.table.highlight)
Subtly emphasized table with colored left border and background tint for important data sections.
| Feature | Starter | Pro | Enterprise |
|---|---|---|---|
| Users | 5 | Unlimited | Unlimited |
| API Access | Limited | Full | Full |
| Support | Priority | 24/7 |
Featured Table (.table.featured)
Showcase table for key performance indicators with gradient header, borders, and elevated shadow. Lifts on hover.
| KPI | Current | Target | Status |
|---|---|---|---|
| Customer Satisfaction | 94% | 95% | Near Target |
| On-Time Delivery | 98.5% | 98% | Exceeds Target |
| Cost Efficiency | 87% | 90% | On Track |
Data Table (.table.data)
Clean, neutral table for dense information with minimal border styling. Works well with .table-sm for compact data.
| ID | Date | Type | Amount | Reference |
|---|---|---|---|---|
| TXN-001 | 2025-03-15 | Deposit | $5,000 | ACH-2025-001 |
| TXN-002 | 2025-03-14 | Withdrawal | $1,200 | CHK-4567 |
| TXN-003 | 2025-03-13 | Transfer | $2,500 | FED-2025-089 |
| TXN-004 | 2025-03-12 | Deposit | $3,750 | ACH-2025-002 |
| TXN-005 | 2025-03-11 | Fee | -$25 | MNT-2025-03 |
Enhanced Bootstrap Table Variants (Skin-Aware Colors)
Standard Bootstrap color variants now adapt to your selected skin using the same colors as blockquote alerts. Apply variants to <tr> elements or to the entire <table> using classes like .table-primary, .table-success, etc. The striped row color also adapts to the selected skin's theme color.
| Variant | Class | Description |
|---|---|---|
| Primary | .table-primary |
Matches your skin's primary accent color |
| Secondary | .table-secondary |
Matches secondary/neutral colors |
| Success | .table-success |
Matches success alert color |
| Info | .table-info |
Matches info alert color |
| Warning | .table-warning |
Matches warning alert color |
| Danger | .table-danger |
Matches danger alert color |
Cards
Card Header
Card with a colored header section.
Card with Image
Card with image header.
Card Title
Card with footer section below content.
- Feature 1
- Feature 2
- Feature 3
Success Message
This card uses success color styling.
Alerts & Badges
Alert Boxes
Badges
Primary Secondary Success Danger Warning Info Light Dark
Pill Primary Pill Secondary Pill Success
Forms & Input Elements
Text Inputs
Textarea & Select
Input States & Sizes
Form Layout (Horizontal)
Buttons & Links
Links
Standard link — Default hyperlink
Button Styles
Outline Buttons
Button Sizes
Button States
Button Group
Code & Technical Elements
Code Blocks
const message = "Hello, World!"; — Inline code example
function greet(name) {
return `Hello, ${name}!`;
}
const result = greet("Alice");
console.log(result);
Technical Text Elements
The variable x represents the width of the container.
To run the program, open terminal and type: ./script.sh
Save your work by pressing Ctrl + S
Example output: User@computer:~$ echo "Hello"
Navigation Components
Tabs Navigation
Tab 1 Content — This is the first tab's content.
Tab 2 Content — This is the second tab's content.
Tab 3 Content — This is the third tab's content.
Pills Navigation
Pill 1 Content — Content for pill one.
Pill 2 Content — Content for pill two.
Pill 3 Content — Content for pill three.
Breadcrumb Navigation
Pagination
Other Components
Accordion
Modal
Progress Bars
Spinners/Loaders
List Groups
- First item
- Second item (active)
- Third item
- Fourth item (disabled)
Colored List Groups
- Primary item
- Success item
- Danger item
- Warning item
- Info item
- Dark item
Media Objects
This is a media object layout with an image/icon on the left and content on the right.
Grid & Layout Utilities
Basic Grid Layout
Various Column Widths
Responsive Grid (Changes at Breakpoints)
Column Alignment
Background Colors & Utilities
Spacing & Margins
Borders & Shadows
Display & Visibility Classes
d-inline
d-inline-block
d-block
d-flex item 1 d-flex item 2
Opacity
Horizontal Rules
Content above the divider
Content below the divider
Content with colored divider above
Theme Elements Test — Alderpen Theme v8.0 CSS Architecture
Use this page to test styling across all available skins