Styled lists for content organization - from basic bullets to icon lists and definition lists.

Listas no ordenadas básicas

Espaciado predeterminado

  • Dashboard with real-time metrics
  • User management and permissions
  • Advanced reporting tools
  • API integration capabilities
  • Multi-language support

Espaciado compacto

  • Reduced vertical spacing
  • Perfect for dense content
  • Saves vertical space
  • Easy to scan quickly

Diseño amplio

  • More breathing room between items
  • Better for longer content blocks
  • Improved readability

Listas ordenadas

Numérico (predeterminado)

  1. Create a new project
  2. Configure basic settings
  3. Invite team members
  4. Set up workflows
  5. Launch and monitor

Números romanos

  1. Executive summary
  2. Market analysis
  3. Financial projections
  4. Implementation roadmap

Alfabético

  1. Appendix A: Technical specifications
  2. Appendix B: User testimonials
  3. Appendix C: Pricing structure

Listas de definición

Diseño estándar

API Key
A unique identifier used to authenticate requests to the API
Webhook
HTTP callbacks that send real-time data to your application when events occur
OAuth 2.0
Industry-standard protocol for authorization allowing third-party access

Diseño en línea

Estado
Active
Creado
2025-01-15
Modificado
2025-10-05
Autor
John Doe

Listas de iconos

Éxito (marcas de verificación)

  • SSL/TLS encryption enabled
  • Automatic daily backups
  • 99.9% uptime SLA guarantee
  • 24/7 customer support

Peligro (marcas X)

  • Deprecated API endpoint
  • Unsupported browser version
  • Missing required permissions

Información (flechas)

  • Navigate to Settings panel
  • Select Integration options
  • Choose your provider
  • Complete authentication

Advertencia (exclamación)

  • Rate limit approaching threshold
  • Certificate expires in 30 days
  • Low disk space warning

Listas con borde y rayas

Lista con borde

  • User Management Module
  • Content Management System
  • Analytics Dashboard
  • Email Campaign Tools
  • Reporting Engine

Lista rayada

  • Monthly subscription: $99/month
  • Annual subscription: $990/year (2 months free)
  • Enterprise plan: Custom pricing
  • Educational discount: 50% off

Listas en línea y sin estilo

Lista en línea

Lista sin estilo

  • No bullets or numbers
  • Just plain text items
  • Perfect for custom styling
  • Or semantic markup needs

Listas complejas con avatares

👤
Sarah Johnson
Product Manager
Last active: 2 hours ago
👤
Michael Chen
Lead Developer
Last active: 15 minutes ago
👤
Emily Rodriguez
UX Designer
Last active: 1 day ago

Guía de implementación

Clases disponibles

Listas desordenadas (ul)
  • pa-list-basic - Base unordered list
  • pa-list-basic--compact - Reduced spacing
  • pa-list-basic--spacious - Increased spacing
  • pa-list-basic--unstyled - No bullets, no padding
  • pa-list-basic--inline - Horizontal layout
  • pa-list-basic--bordered - Border between items
  • pa-list-basic--striped - Zebra striping
  • pa-list-basic--icon - Checkmarks (success)
  • pa-list-basic--icon pa-list-basic--danger - X marks
  • pa-list-basic--icon pa-list-basic--info - Arrows
  • pa-list-basic--icon pa-list-basic--warning - Exclamation marks
Listas ordenadas (ol)
  • pa-list-ordered - Base ordered list (numeric)
  • pa-list-ordered--roman - Roman numerals (I, II, III)
  • pa-list-ordered--alpha - Lowercase letters (a, b, c)
Listas de definición (dl)
  • pa-list-definition - Standard definition list
  • pa-list-definition--inline - Horizontal key-value pairs
Listas complejas
  • pa-list - Container for complex list items
  • pa-list__item - Individual list item with avatar/content
  • pa-list__avatar - Avatar/icon container
  • pa-list__content - Content wrapper
  • pa-list__title - Primary text
  • pa-list__subtitle - Secondary text
  • pa-list__meta - Metadata text

John Doe

Administrator

Configuración

Press Ctrl+K to preview the palette.
Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.
Comandos
🚀
Desplegar a entorno
Desplegar una rama a un entorno
g d
👤
Asignar a usuario
Asignar un elemento a un miembro del equipo
g a
🧭
Ir a la página
Navegar a una página
g g
🎨
Cambiar tema
Cambiar el tema visual
g t
Buscar
📦
Productos
Buscar productos
:products
📋
Pedidos
Buscar pedidos
:orders
👥
Usuarios
Buscar usuarios
:users
🧾
Facturas
Buscar facturas
:invoices