magma

magma

  • Matter
  • CLI
  • API
  • Help
  • Blog
  • Resources

›Structural

Matter

  • Digital Substance

Primitives

  • Typography
  • Text Tokens
  • Color
  • Color Tokens
  • Icons
  • Grid
  • Spacing
  • Elevation

Components

    Transaction-focused

    • Accordion
    • Alert Box
    • Avatar
    • Badge
    • Breadcrumb
    • Button Group
    • Button
    • Callout
    • Checkbox
    • Date Picker
    • Date Time Picker
    • Dropdown Menu
    • Filter Search
    • Filter Tags
    • Input Text
    • Link
    • Pagination
    • Progress Indicator
    • Radio Button
    • Rating
    • Select
    • Slider
    • Spinner
    • Tabs
    • Toast
    • Tooltip

    Content-focused

    • Core Editorial
    • Autoría

Containers

  • Container 1
  • Container 2

Modules

    Structural

    • Cabecera
    • footer

    Other

    • Orden de trabajo
    • Otros

Patterns

  • This is document number 3

cabecera

Cabecera

El header es una parte fundamental de la web que se encuentra en la parte superior de la página y que se repite en todas ellas, dotándola de continuidad y coherencia.

Descarga la librería LDDescarga la librería SD


El header es, posiblemente, lo primero que ve el usuario una vez ha accedido a una web, por lo que gran parte del peso y responsabilidad recaen sobre él ya que tiene que facilitar la navegación a los usuarios debido a que contiene la carga informativa más relevante. Del header dependerá gran parte de la navegación por el resto de las páginas que la componen.

Es un elemento que cobra especial interés a la hora de mejorar la usabilidad de la web y la experiencia del usuario en esta.

Contiene las secciones en las que se divide la página y los detalles de apoyo, y puede incluir múltiples acciones y componentes:

  • Elementos básicos de la identidad de marca: logotipo, icono, eslogan, etc.
  • Buscador.
  • Selección de idioma.
  • Links a las secciones de la web.

Cuándo usar este componente

Debe usar el encabezado en la parte superior de cada página.

Cómo funciona

Encabezado corporativo

Use el encabezado corporativo si tu navegación tiene 3 páginas o más.

Cabecera corporativa

Use el encabezado con un nombre de servicio si su servicio tiene más de 5 páginas, esto puede ayudar a los usuarios a comprender qué servicio están usando.

Cabecera corporativa LD - RDS


Cabecera corporativa SD - RDS


Cabecera corporativa con navegación

Utilice el encabezado con navegación si necesita incluir enlaces básicos de navegación, contactos o administración de cuentas.

Cabecera corporativa LD - RDS


Cabecera corporativa SD - RDS


Cabecera transaccional

Esta difiere un poco de las demás debido a una serie de características específicas propias del aplicativo.

Cabecera transaccional LD - RDS


Cabecera transaccional SD - RDS


Estilos

Color

Cabecera corporativa

Cabecera - RDS

Cabecera transaccional

Cabecera - RDS

Tipografía

Cabecera corporativa

Cabecera - RDS

Cabecera transaccional

Cabecera - RDS

Elevations

Cabecera - RDS
← Container 2footer →
  • Cuándo usar este componente
  • Cómo funciona
    • Encabezado corporativo
    • Cabecera corporativa
    • Cabecera corporativa con navegación
    • Cabecera transaccional
    • Estilos
  • Color
  • Tipografía
  • Elevations
magma
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2019 Secuoyas Experience SLU