Design System
Iniciar Sesión Registrarse

Resultados

Abrir Shell Completo
Modo de Vista Previa

Tipografía

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

Paleta de Colores

Retro Colors

Gray
Dark Gray
Light Gray
Blue
White
Black

Botones

Bootstrap Buttons

Outline Buttons

Disabled State

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

Formularios

Bootstrap Forms

Help text for this field.

Tablas

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

Tarjetas

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.

Insignias y Píldoras

Badges

Primary Secondary Success Danger Warning Info Light Dark

Pills

Primary Secondary Success Danger

Componentes de Eventos

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

Componentes del Foro

Forum Topic
Topic Title Here

This is the topic content with some discussion text.

Posted by username • 2 hours ago
General

Navegación

Breadcrumb

Pagination

Retro Tabs

Tab 1
Tab 2
Tab 3

Alertas y Mensajes

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

Barras de Progreso

25%
50%
75%
100%

Componentes de Navegación

Breadcrumbs

Retro Breadcrumbs (Component)

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

Pagination

Retro Pagination

← Previous 1 2 3 Next →

Modales y Diálogos

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+

Icons

Font Awesome Icons

Home Folder Note Calendar Task User Settings Message

Status Indicators

Success Error Warning Info ● Neutral

Espaciado y Diseño

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