Trang này trình bày tất cả các thành phần nội dung có thể sử dụng trong bài viết — từ ảnh full-width, gallery, quote, callout, bookmark đến embed video và audio.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Hình ảnh — Normal Width
Hình ảnh — Wide Width
Hình ảnh — Full Width
Gallery
Quotes
Blockquote thông thường:
Cách duy nhất để làm việc tuyệt vời là yêu thích những gì bạn làm. — Steve Jobs
Blockquote kiểu alternate (căn giữa, italic):
Hành trình duy nhất không thể thực hiện là hành trình bạn chưa bao giờ bắt đầu. — Tony Robbins
Callout Cards
💡
Đây là một callout vàng — thường dùng để đánh dấu thông tin nổi bật hoặc mẹo hữu ích.
ℹ️
Đây là một callout xanh — dùng cho thông báo thông tin hoặc lưu ý trung tính.
⚠️
Đây là một callout đỏ — cảnh báo hoặc nội dung cần chú ý đặc biệt.
✅
Đây là một callout xanh lá — thành công, xác nhận hoặc thực hành tốt.
Header Card
Bookmark Card
Embed — YouTube
Audio
Demo Audio Track — Free Music
0:00
/0:00
Video — Upload / Hosted
0:00
/0:00
Toggle / Accordion
Khi nào nên dùng Toggle? ▾
Toggle cho phép bạn ẩn/hiện nội dung — rất hữu ích cho mục FAQ, giải thích kỹ thuật hoặc nội dung bổ sung mà không làm rối bố cục chính.
Toggle có cần JavaScript không? ▾
Với HTML thuần (<details> + <summary>), toggle hoạt động hoàn toàn không cần JavaScript. Đây là cách tiếp cận đơn giản và có khả năng truy cập tốt nhất.
Lists
Danh sách thứ tự:
- Xác định vấn đề cần giải quyết
- Nghiên cứu và thu thập thông tin
- Thiết kế giải pháp
- Triển khai và kiểm thử
- Đánh giá và cải tiến
Danh sách không thứ tự:
- Performance là ưu tiên hàng đầu
- Accessibility không phải tùy chọn
- Code sạch hơn code nhanh
- Đơn giản tốt hơn phức tạp
Code Blocks
Inline: const greeting = "Xin chào, thế giới!"
// Ví dụ async/await
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (err) {
console.error("Lỗi khi fetch:", err);
throw err;
}
}
/* Ghost kg-width utilities */
.kg-width-wide {
grid-column: wide;
}
.kg-width-full {
grid-column: full;
}
Table
| Thành phần | Mô tả | Cần JS? |
|---|---|---|
| Image (wide/full) | Ảnh mở rộng ra ngoài content | Không |
| Gallery | Lưới ảnh nhiều cột | Không |
| Callout | Khối nổi bật có emoji | Không |
| Bookmark | Card preview link | Không |
| Header Card | Banner full-width | Không |
| Embed | iframe YouTube/Vimeo | Không |
| Audio | Trình phát âm thanh | Có |
| Video | Trình phát video | Có |
| Toggle | Ẩn/hiện nội dung | Không* |
*Sử dụng <details> HTML thuần.