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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Los tamaños de los enlaces de Primer CSS se pueden definir utilizando las clases de utilidad que vienen con los componentes de enlace de marketing. Hay dos tamaños: grande y pequeño. Un enlace de marketing se puede definir aplicando la clase link-mktg en la etiqueta <a> .
Primer CSS Clases de tamaños de enlaces:
- link-mktg f3-mktg: estas clases se utilizan para establecer el tamaño del enlace en grande.
- link-mktg f4-mktg: estas clases se utilizan para establecer el tamaño del enlace en pequeño.
Sintaxis:
<a href="#" class="link-mktg f3-mktg">
...
</a>
Ejemplo 1: El siguiente ejemplo muestra el uso de las clases mencionadas anteriormente para cambiar el tamaño del enlace.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Link Sizes - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@19.8.2/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green">GeeksforGeeks</h2> <strong>Link Sizes - Primer CSS</strong> </div> <div class="d-flex flex-items-center flex-column"> <a href="#" class="link-mktg f3-mktg mt-3 mb-3"> Large Link </a> <a href="#" class="mb-3">Default Link</a> <a href="#" class="link-mktg f4-mktg mb-3"> Small Link </a> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el uso de clases de tamaño de enlace con diferentes colores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Link Sizes - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@19.8.2/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green">GeeksforGeeks</h2> <strong>Link Sizes with Different Colors - Primer CSS</strong> </div> <div class="d-flex flex-items-center flex-column"> <a href="#" class="link-mktg f3-mktg mt-3 mb-3 color-fg-success"> Large Link with Success Color </a> <a href="#" class="link-mktg f3-mktg mb-3 color-fg-done"> Large Link with Done Color </a> <a href="#" class="mb-3 color-fg-danger"> Default Link with Danger Color </a> <a href="#" class="link-mktg f4-mktg mb-3 color-fg-accent"> Small Link with Accent Color </a> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/marketing-links#link-sizes