Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece enlaces de marketing que se producen tomando la clase básica .link-mktg junto con un conjunto de clases modificadoras para manejar el color y el tamaño. El enlace con énfasis se puede hacer agregando la clase .link-emphasis-mktg al enlace para obtener un subrayado pálido junto con el relleno cuando se activa el evento de desplazamiento.
Primer enlace CSS con clases de énfasis:
- link-emphasis-mktg: esta clase se usa para crear un enlace con un subrayado pálido que se llenará al pasar el mouse por encima.
Sintaxis:
<a href="#" class="link-mktg arrow-target-mktg
link-emphasis-mktg text-semibold f3-mktg">
...
</a>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Links with Emphasis.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Link with Emphasis </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css"> </head> <body> <center> <h1 class="color-fg-open">GeeksforGeeks</h1> <h4>Primer CSS Link with Emphasis</h4> <a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f3-mktg mt-3"> Write an Article <svg width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 16 16"> <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001zm-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708l-1.585-1.585z" /> </svg> </a> </center> </body> </html>
Producción:
Primer enlace CSS con énfasis
Ejemplo 2: Este es otro ejemplo que ilustra el uso de Primer CSS Links with Emphasis.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Link with Emphasis </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css"> </head> <body> <center> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h4>Primer CSS Link with Emphasis</h4> <a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f3-mktg mt-3"> Pick Article to Write <svg width="16" height="16" fill="currentColor" class="bi bi-bookmark-check-fill" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5zm8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z" /> </svg> </a> </center> </body> </html>
Producción:
Primer enlace CSS con énfasis
Referencia: https://primer.style/css/components/marketing-links#link-with-emphasis
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA