Glass Component Documentation

The Glass component in Axcora SSG brings a stylish, modern glassmorphism effect to your content blocks. This component is perfect for drawing attention to important information or adding visual flair to your layouts. You can use the glass component anywhere in your templates or within your Markdown content, ensuring both flexibility and consistency.

installation

# default glass
npm i axcora-glass
# 2 grid glass
npm i axcora-glass-2
# 3 grid glass
npm i axcora-glass-3

1. Enabling Glass Component

Import the glass component per template by adding it to your template's front-matter, such as in templates/blog/single.axcora:

---
layouts: base
css:
  theme: 'essentials'
  components:
    - glass
---
<main>{{content}}</main>

Once imported, glass elements can be used in both Markdown content and templates.

2. Usage Examples

Single Glass Box

{% axcora-glass title="Glass Title" text="Content in here" /%}

Output:

Two Glass Boxes

{% axcora-glass-2 title1="Glass Title" text1="Content in here" title2="Glass Title 2" text2="Content 2 in here" /%}

Output:

Three Glass Boxes

{% axcora-glass-3 title1="Glass Title" text1="Content in here" title2="Glass Title 2" text2="Content 2 in here" title3="Glass Title 3" text3="Content 3 in here" /%}

Output:

3. Glass Component Properties

4. Glass Morphism CSS

The glass component uses the following CSS for the glassmorphism effect:

.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
}
[data-theme="dark"] .glass {
  background: rgba(8, 24, 55, 0.45);
  border: 1px solid rgba(219, 225, 235, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

• Light mode: Subtle frosted glass effect on any background.
• Dark mode: Deeper glass tone for clarity and legibility on dark backgrounds.

5. Best Practices

• Contrast: Use the glass component on colorful or image backgrounds for best effect.
• Content: Keep glass content concise—ideal for callouts, testimonials, or summaries.
• Responsiveness: The glass effect adapts smoothly to different layouts and themes.

6. Summary Table

The Axcora Glass component lets you present content with an attractive, modern glassmorphism effect—boosting visual impact wherever you need it, whether in articles or advanced templates.