Design System
Accedi Registrati

Risultati

Apri shell completa
Modalità anteprima

Tipografia

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

Palette colori

Retro Colors

Gray
Dark Gray
Light Gray
Blue
White
Black

Pulsanti

Bootstrap Buttons

Outline Buttons

Disabled State

Retro Windows 95 Components

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" %}

Moduli

Bootstrap Forms

Help text for this field.

Tabelle

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

Schede

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.

Badge e pillole

Badges

Primary Secondary Success Danger Warning Info Light Dark

Pills

Primary Secondary Success Danger

Componenti eventi

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

Componenti forum

Forum Topic
Topic Title Here

This is the topic content with some discussion text.

Posted by username • 2 hours ago
General

Navigazione

Breadcrumb

Pagination

Retro Tabs

Tab 1
Tab 2
Tab 3

Avvisi e messaggi

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

Barre di avanzamento

25%
50%
75%
100%

Componenti navigazione

Breadcrumbs

Retro Breadcrumbs (Component)

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

Pagination

Retro Pagination

← Previous 1 2 3 Next →

Finestre modali e dialoghi

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+

Icone

Font Awesome Icons

Home Folder Note Calendar Task User Settings Message

Status Indicators

Success Error Warning Info ● Neutral

Spaziatura e layout

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