Template Reference Library
A visual guide to all the Astro templates and their variants available in the `src/templates` directory.
1. CardGrid Template
Component: card-grid.astro | Used for displaying cards in a responsive grid.
Variant: "green" (Default)
Green Card 1
Default variant with green border and shadow.
- This is a sample list item
- Another important detail goes here
- Highlighting key features and benefits
Green Card 2
Default variant with green border and shadow.
Variant: "blue"
Blue Card 1
Variant with blue border and shadow.
- This is a sample list item
- Another important detail goes here
- Highlighting key features and benefits
Blue Card 2
Variant with blue border and shadow.
Variant: "premium-blue"
Premium Blue 1
Top thick blue border with gradient background on hover.
- This is a sample list item
- Another important detail goes here
- Highlighting key features and benefits
Premium Blue 2
Top thick blue border with gradient background on hover.
Variant: "premium-green"
Premium Green 1
Top thick green border with gradient background on hover.
- This is a sample list item
- Another important detail goes here
- Highlighting key features and benefits
Premium Green 2
Top thick green border with gradient background on hover.
Variant: "simple"
Simple Card 1
Clean, thin border with subtle shadow.
- This is a sample list item
- Another important detail goes here
- Highlighting key features and benefits
Simple Card 2
Clean, thin border with subtle shadow.
Variant: "output" (Glassmorphism)
Output Card 1
Translucent background with glass effect and subtle border.
Output Card 2
Translucent background with glass effect and subtle border.
2. BentoCards Template
Component: bento-cards.astro | Two-column asymmetrical layout for comparison or included items.
Two Column Comparison
Left Column (Blue)
Usually for general categories:
Category 1
Category 2
Category 3
Right Column (Green)
Usually for specific inclusions:
Specific Feature A
Specific Feature B
Specific Feature C
Specific Feature D
3. ServiceTabs Template
Component: service-tabs.astro | Interactive horizontal tabs with content and image.
Service Tabs Example
First Tab Content
Description for the first tab goes here.
Point A
Desc A
Point B
Desc B
4. SplitSection Template
Component: split-section.astro | Text on one side, image on the other.
Standard Split Section
This is a paragraph of text explaining the concept.
Here is another paragraph with more details.
5. FeatureGrid Template
Component: feature-grid.astro | Alternating image and text layout for features.
Alternating Feature Grid
How can we support you?
Contact us6. ImageCarousel Template
Component: image-carousel.astro | Scrolling carousel of images.
Image Carousel Example
7. ProcessSteps Template
Component: process-steps.astro | Sequential steps display.
How It Works
Step 1
First step description
Step 2
Second step description
Step 3
Third step description
8. TextBlock Template
Component: text-block.astro | Centered text content with badge and title.
Text Block Title
This is a simple text block used for introductions or summaries.
It can take multiple paragraphs.
9. CtaSection Template
Component: cta-section.astro | Call to action section.
Ready to get started?
Join us today and improve your business.
10. FaqAccordion Template
Component: faq-accordion.astro | Expandable FAQ items.
Frequently Asked Questions
Answer 1.
Answer 2.
Note: More templates like TimelineCards, MethodologyCards, HighlightCards, CategoryTabs, CircleWheel, PartnerCards, MedalCards, and BrandSlider are also available in the source code!