Astro Edge Style Guide

Koleksi komponen UI native, ringan, dan accessible yang dibina khas untuk projek Astro Build.

1. Buttons

2. Card Variations

Gaya kad standard dengan bayang-bayang ringan dan border halus. BEM classes diuruskan secara automatik.

Bordered Card

Gaya kad yang lebih tegas tanpa bayang-bayang, fokus pada garisan luar.

Ghost / Draft Card

Sesuai untuk item draft atau placeholder yang belum aktif.

Glassmorphism Card

Efek kaca tembus pandang yang moden dan elegan.

3. Content Cards (With Images)

Tutorial

Membina SaaS dengan Astro 5

Pelajari teknik terpantas membina aplikasi web moden tanpa framework CSS yang berat.

Hadee Roslan

Lead Systems Architect

Pakar dalam pembinaan infrastruktur awan dan aplikasi web berprestasi tinggi.

4. Inputs & Form

Username Minimun 5 aksara.

Email Address Format emel tidak sah.

4. Accordion

Apakah itu Astro Edge?

Astro Edge adalah platform hibrid yang menggabungkan kelajuan halaman statik dengan fleksibiliti fungsi serverless Cloudflare.

Bagaimana dengan aksesibiliti?

Semua komponen mematuhi standard WAI-ARIA dan boleh dikendalikan sepenuhnya menggunakan papan kekunci.

5. Interactive Components

6. Switch

Airplane Mode

Dark Mode

7. Tabs

Ini adalah kandungan bagi tab Overview.

8. Dropdown

10. Image Aspect Ratios

Ratio 4:3

Sesuai untuk galeri gambar biasa.

Ratio 3:4

Sesuai untuk poster atau katalog pakaian.

Ratio 1:1

Sesuai untuk produk e-commerce atau Instagram style.