Hosting WordPress
Plan de 25 GB con copias de seguridad diarias y certificado SSL incluido.
Estado
Activo
Próximo cargo
11,40 €
Uso
Estructura
El armazón en el que vive una página entera: una barra superior fija con la marca, un panel lateral con la navegación, una columna de contenido y un pie. Es lo único que no cambia al navegar.
<vadavo-shell name="…"> genera la marca de la barra —logotipo y nombre, con su highlight— a partir del atributo name. El resto son huecos: search (un buscador), actions, sidebar para la navegación, el hueco por defecto para el contenido y footer.
El menú de pantallas estrechas es del propio shell, que genera el panel que abre y cierra.
La columna de lectura expone --shell--size--reading-width y --shell--padding--reading, así que su ancho se redefine desde fuera sin tocar el shadow root.
El shell no tiene radio, ni borde, ni sombra propia. El recuadro que envuelve los ejemplos de abajo es el marco de figura de esta documentación.
actions. La navegación de sección va en el panel lateral.ul.top-links antes de todo lo demás, para entradas de primer nivel que no pertenecen a ninguna sección.section.section con un rótulo span.section-label en mayúsculas. Dentro van sus enlaces directamente, o sus grupos si los tiene.details.group que agrupa enlaces afines bajo un rótulo plegable con su recuento. El chevron del rótulo es un <vadavo-icon name="chevron"> con la clase chevron, que el grupo gira al abrirse.footer. El shell le da el ancho y el relleno; el fondo lo pone la clase de superficie de marca que se le añada.La barra lleva los avisos y la cuenta de quien ha entrado, porque hay una sesión detrás, y el índice apunta a los datos de ese cliente. El buscador lleva el atajo Ctrl+K / ⌘K.
Plan de 25 GB con copias de seguridad diarias y certificado SSL incluido.
<style>
/* De esta página, no del sistema: el shell coloca lo que va en sus
huecos y la aplicación decide qué aspecto tiene. */
vadavo-shell .account {
display: inline-flex;
align-items: center;
height: var(--control--height--compact);
gap: 0.5625rem;
padding: 0 0.8125rem 0 0.3125rem;
font-size: 0.875rem;
white-space: nowrap;
color: var(--text--color--ui);
border: var(--border--width--line) var(--border--style--line) var(--border--color--rest);
border-radius: var(--control--radius--pill);
}
vadavo-shell .account > vadavo-avatar {
--avatar--size--box: 1.75rem;
--avatar--font-size--initials: 0.6875rem;
flex: none;
}
vadavo-shell .dot {
position: absolute;
top: 0.4375rem;
right: 0.5rem;
width: 0.5rem;
height: 0.5rem;
border: 1.5px solid var(--control--background--rest);
border-radius: var(--indicator--radius--dot);
background: var(--state--color--error);
}
vadavo-shell .description {
max-width: 56ch;
margin: 0.625rem 0 1.375rem;
}
vadavo-shell .statistics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
gap: 0.875rem;
}
vadavo-shell .statistic {
padding: 1rem 1.125rem;
border: var(--surface--border-width--container) var(--surface--border-style--container) var(--surface--border--container);
border-radius: 0.875rem;
background: var(--surface--color--container);
}
vadavo-shell .statistic > .label {
margin-bottom: 0.375rem;
font-size: var(--text--font-size--eyebrow);
letter-spacing: var(--text--letter-spacing--eyebrow);
text-transform: uppercase;
color: var(--text--color--meta);
}
vadavo-shell .statistic > .value {
font-family: var(--text--font-family--display);
font-weight: var(--text--font-weight--display);
font-size: 1.25rem;
font-variant-numeric: tabular-nums;
color: var(--text--color--display);
}
</style>
<vadavo-shell name="Área de clientes">
<vadavo-search slot="search" compact placeholder="Busca un servicio, dominio o factura…" shortcut="Ctrl+K / Cmd+K"></vadavo-search>
<vadavo-tooltip slot="actions" placement="below end" text="3 avisos sin leer">
<button class="button tertiary icon compact">
<vadavo-icon name="bell"></vadavo-icon>
<span class="dot"></span>
</button>
</vadavo-tooltip>
<span slot="actions" class="account">
<vadavo-avatar initials="CM"></vadavo-avatar>
Christian M.
</span>
<nav slot="sidebar">
<ul class="top-links">
<li><a href="javascript:void(0)">Resumen</a></li>
</ul>
<section class="section">
<span class="section-label">Contratado</span>
<details class="group" open>
<summary>
<vadavo-icon class="chevron" name="chevron"></vadavo-icon>
<span class="label">Servicios</span>
<span class="count">2</span>
</summary>
<ul>
<li><a href="javascript:void(0)" class="current">Hosting WordPress</a></li>
<li><a href="javascript:void(0)">Dominios</a></li>
</ul>
</details>
</section>
</nav>
<nav>
<vadavo-breadcrumb>
<li><a href="javascript:void(0)">Inicio</a></li>
<li><a href="javascript:void(0)">Servicios</a></li>
<li><span class="current">Hosting WordPress</span></li>
</vadavo-breadcrumb>
</nav>
<h1>Hosting WordPress</h1>
<p class="description">Plan de 25 GB con copias de seguridad diarias y certificado SSL incluido.</p>
<div class="statistics">
<div class="statistic">
<div class="label">Estado</div>
<span class="badge success">Activo</span>
</div>
<div class="statistic">
<div class="label">Próximo cargo</div>
<div class="value">11,40 €</div>
</div>
<div class="statistic">
<div class="label">Uso</div>
<progress class="progress" value="64" max="100"></progress>
</div>
</div>
</vadavo-shell>La barra lleva marca y buscador, y nada más. El índice apunta a páginas que se leen, y el buscador entra en el contenido de cada una: cada sugerencia trae como subtítulo el fragmento donde aparece lo buscado.
Este sitio usa esta configuración.
Una ventana centrada sobre un fondo oscurecido, para confirmaciones que requieren toda la atención.
<style>
/* De esta página, no del sistema: el shell dibuja la franja del pie y
el sitio reparte lo que pone dentro. */
vadavo-shell .under-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
font-size: var(--text--font-size--caption);
}
vadavo-shell .under-line > ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
vadavo-shell .under-line a {
color: var(--text--color--navigation);
}
vadavo-shell .under-line a:hover {
color: var(--text--color--link-hover);
}
vadavo-shell .company-name {
color: var(--text--color--meta);
}
</style>
<vadavo-shell name="Diseño">
<vadavo-search slot="search" compact placeholder="Busca en la documentación…"></vadavo-search>
<aside slot="sidebar">
<ul class="top-links">
<li><a href="javascript:void(0)">Introducción</a></li>
</ul>
<section class="section">
<span class="section-label">Catálogo</span>
<details class="group" open>
<summary>
<vadavo-icon class="chevron" name="chevron"></vadavo-icon>
<span class="label">Contenedores</span>
<span class="count">5</span>
</summary>
<ul>
<li><a href="javascript:void(0)">Tarjetas</a></li>
<li><a href="javascript:void(0)" class="current">Modal</a></li>
</ul>
</details>
</section>
</aside>
<span class="eyebrow">Contenedores</span>
<h1>Modal</h1>
<p>Una ventana centrada sobre un fondo oscurecido, para confirmaciones que requieren toda la atención.</p>
<vadavo-card heading="Ejemplo interactivo">
<button class="button secondary">Eliminar dominio</button>
</vadavo-card>
<footer slot="footer" class="spotlight">
<div class="under-line">
<div class="company-name">© 2026 VADAVO · Todos los derechos reservados.</div>
<ul>
<li><a href="javascript:void(0)">Aviso legal</a></li>
<li><a href="javascript:void(0)">Política de privacidad</a></li>
</ul>
</div>
</footer>
</vadavo-shell>| Token | Qué es |
|---|---|
--shell--height--topbar | El alto de la barra superior. La posición y el alto de la barra lateral se calculan a partir de él. |
--shell--shadow--sidebar-drawer | La sombra de la barra lateral cuando se abre sobre el contenido en pantallas estrechas. |
--shell--color--menu-toggle | El color del botón que abre el menú en pantallas estrechas. |
--shell--size--reading-width | El ancho máximo de la columna de lectura. |
--shell--padding--reading | El relleno interior (padding) de la columna de lectura. |