Contenido

Tarjeta de servicio

Una tarjeta que lleva a un servicio: el icono del producto, su nombre, una línea de descripción y el disco con la flecha.

Uso

<vadavo-service-card> envuelve un enlace a nativo — la tarjeta entera es el enlace. La caja es una tarjeta con raised, colocada dentro del enlace para que toda la tarjeta, relleno incluido, forme parte de él. Dentro van el span.icon-slot con las dos versiones del icono de producto, un div.header con el nombre, y un div.content con la descripción y el span.arrow. La flecha del disco la coloca el propio componente.

Al pasar el ratón, el enlace redefine los tokens que la tarjeta lee: cambian su color de fondo y el color de su texto, el icono pasa a su versión blanca y la flecha se desplaza a la derecha.

Recursos garantizados y escalables, gestionados por nosotros.

Centralita virtual y móvil con una sola factura.

<vadavo-service-card>
    <a href="javascript:void(0)">
        <span class="icon-slot">
            <img src="icons/menu-vps.svg" alt="">
            <img class="alt" src="icons/menu-vps-white.svg" alt="">
        </span>
        <div class="header">Servidor VPS</div>
        <div class="content">
            <p>Recursos garantizados y escalables, gestionados por nosotros.</p>
            <span class="arrow"></span>
        </div>
    </a>
</vadavo-service-card>
<vadavo-service-card>
    <a href="javascript:void(0)">
        <span class="icon-slot">
            <img src="icons/menu-phone.svg" alt="">
            <img class="alt" src="icons/menu-phone-white.svg" alt="">
        </span>
        <div class="header">Telefonía</div>
        <div class="content">
            <p>Centralita virtual y móvil con una sola factura.</p>
            <span class="arrow"></span>
        </div>
    </a>
</vadavo-service-card>

Tokens semánticos

Token	Qué es
`--service-card--background--hover`	El color de fondo de la tarjeta al apuntarla.
`--service-card--color--hover-text`	El color del texto de la tarjeta al apuntarla.
`--service-card--background--arrow`	El color de fondo del disco de la flecha.
`--service-card--color--arrow`	El color de la flecha sobre el disco.
`--service-card--border--arrow`	El color del borde del disco de la flecha.
`--service-card--border-width--arrow`	El grosor del borde del disco de la flecha.
`--service-card--border-style--arrow`	El tipo (`border-style`) del borde del disco de la flecha.