Design System
登入 註冊

結果

打开完整Shell
预览模式

字體排版

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Card Title

Heading 5 - Small Title
Heading 6 - Smallest Title

Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted text for secondary information

Small text for captions and metadata

This is a link within a paragraph.

Bold text and italic text examples.

This is a blockquote example.

Someone famous

颜色调色板

Retro Colors

Gray
Dark Gray
Light Gray
Blue
White
Black

按钮

Bootstrap Buttons

Outline Buttons

Disabled State

复古Windows 95组件

Retro Buttons

Sample Window

This is a retro window component with title bar and content area.

It mimics the Windows 95 aesthetic.

Retro Alerts

This is an info alert message
This is a success alert message
This is a warning alert message
This is a danger alert message

Retro Form Fields

Retro Tab Navigation

General settings content goes here.

Empty States

Simple Empty State

No items found

Empty State with Message

No notes yet

Create your first note to get started!

Empty State with Action

No files found

Upload your first file to get started

Upload File
Code Example:
{% retro_empty_state "" "No items found"
    message="Get started by creating your first item"
    action_url="{% url 'create' %}"
    action_text="Create Item" %}

表单

Bootstrap Forms

Help text for this field.

表格

Bootstrap Table

ID Name Status Created Actions
1 Sample Item 1 Active 2024-01-15 Edit Delete
2 Sample Item 2 Pending 2024-01-14 Edit Delete
3 Sample Item 3 Inactive 2024-01-13 Edit Delete

Retro Table

Column 1 Column 2 Column 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

卡片

Card Header
Card Title

Some quick example text to build on the card.

Go somewhere
2 days ago
Public
Template Card

Template description here

username

Category AI Assisted
Retro Card
This is a retro-styled card component.

徽章和药丸

Badges

Primary Secondary Success Danger Warning Info Light Dark

Pills

Primary Secondary Success Danger

事件组件

Upcoming Event
This is an upcoming event description
Location: Conference Room A
Today's Event
This event is happening today
Time: 2:00 PM
Past Event
This event already happened
Date: January 1, 2024

论坛组件

Forum Topic
Topic Title Here

This is the topic content with some discussion text.

Posted by username • 2 hours ago
General

导航

Breadcrumb

Pagination

Retro Tabs

Tab 1
Tab 2
Tab 3

警报和消息

Bootstrap Alerts

List Groups

Basic List Group

  • First item
  • Active item
  • Third item
  • Disabled item

List Group with Badges

  • Inbox 14
  • Sent 2
  • Drafts 1

进度条

25%
50%
75%
100%

导航组件

Breadcrumbs

Retro Breadcrumbs (Component)

Code:
{% load breadcrumb_tags %}
{% breadcrumb "Home" "/" "Projects" "/projects/" "Current Page" %}

Pagination

Retro Pagination

← Previous 1 2 3 Next →

模态框和对话框

Trigger Modal Examples

List Groups

Basic List Group

Active item Second item Third item Disabled item

List Group with Badges

  • Inbox 14
  • Drafts 2
  • Sent 99+

圖示

Font Awesome Icons

Home Folder Note Calendar Task User Settings Message

Status Indicators

Success Error Warning Info ● Neutral

间距和布局

Margin Classes

mb-1 (margin-bottom: 0.25rem)
mb-2 (margin-bottom: 0.5rem)
mb-3 (margin-bottom: 1rem)
mb-4 (margin-bottom: 1.5rem)

Padding Classes

p-1 (padding: 0.25rem)
p-2 (padding: 0.5rem)
p-3 (padding: 1rem)
p-4 (padding: 1.5rem)

Grid System

Responsive Column
Responsive Column
Responsive Column
Responsive Column