Skip to content
TheAIDirector.Win ClaudeJoomla.com ClaudeTemplates.NET

Every HTML element styled for BaseFrame — headings, lists, tables, code blocks, blockquotes, alerts, and more.

Typography Showcase

Every HTML element styled for BaseFrame.

Headings

Heading 1 — The Main Title

Heading 2 — Section Title

Heading 3 — Subsection

Heading 4 — Detail Header

Heading 5 — Minor Header
Heading 6 — Smallest

Paragraphs & Inline Elements

This is a standard paragraph with bold text, italic text, inline code, highlighted text, and a hyperlink. Here is small text and here is abbr.

A second paragraph to show spacing. 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.

Blockquote

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

Lists

Unordered List

  • First item in the list
  • Second item with a link inside
  • Third item with bold text
  • Nested list:
    • Nested item one
    • Nested item two

Ordered List

  1. Install BaseFrame
  2. Choose your CSS framework
  3. Deploy to production

Code

Inline: php cli/joomla.php cache:clean

// BaseFrame adapter loading
$this->addStyleSheet($mediaBase . '/css/base.css');
$this->addStyleSheet($mediaBase . '/css/lib/' . $fw['lib']);
$this->addStyleSheet($mediaBase . '/css/adapters/' . $fw['css']);

Table

FrameworkTypeSizeDark Mode
BulmaFull200KBNo
DaisyUIFull140KBYes
HalfmoonDark-first90KBYes
Pico CSSClassless10KBYes
NES.cssRetro45KBNo

Alerts

This is an info alert — useful for tips and notes.
This is a success alert — operation completed.
This is a warning alert — proceed with caution.
This is a danger alert — something went wrong.

Buttons

Horizontal Rule


Content after a horizontal rule.

Details / Accordion

Click to expand this section

This content is hidden by default and revealed when the user clicks the summary.

Another collapsible section

More hidden content here. Useful for FAQs, changelogs, and documentation.

Images

Demo image
A sample image with a caption below it.