Primer CSS es de código abierto en Github que se crea con el sistema de diseño de GitHub. Podemos usar Primer CSS instalándolo a través de npm o incluir el enlace CDN en nuestro archivo HTML. Tiene diferentes tipos de estilos como espaciado, color y tipografía.
Primer CSS Timeline se utiliza para mostrar los elementos en dirección vertical. Primer CSS TimelineItem-Condensed se usa para reducir el relleno vertical y eliminar el fondo de la insignia. Podemos usarlos en confirmaciones en Github.
En este artículo, discutiremos Primer CSS TimelineItem–condensed.
Primer CSS TimelineItem–Clase condensada:
- TimelineItem–condensed: esta clase se usa para crear elementos de línea de tiempo condensados.
Sintaxis:
<div class="TimelineItem TimelineItem--condensed"> ... </div>
Ejemplo 1: El siguiente ejemplo demuestra Primer CSS TimelineItem–condensed .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS TimelineItem--condensed </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS TimelineItem--condensed </h3> </div> <br> <div class="d-flex flex-justify-center"> <div class="d-flex flex-column"> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-badge"> <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks condensed </div> </div> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-badge"> <svg class="octicon" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true" > <path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"> </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks condensed </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS TimelineItem–condensado
Ejemplo 2: El siguiente ejemplo demuestra Primer CSS TimelineItem–condensed .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS TimelineItem--condensed </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS TimelineItem--condensed </h3> </div> <br> <div class="d-flex flex-justify-center"> <div class="d-flex flex-column"> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-badge" > <svg class="octicon octicon-git-commit" width="16" height="18" viewBox="0 0 16 18" aria-hidden="true" > <path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"> </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks condensed 1 </div> </div> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-badge"> <svg class="octicon octicon-git-commit" width="16" height="18" viewBox="0 0 16 18" aria-hidden="true" > <path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"> </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks condensed 2 </div> </div> <div class="TimelineItem TimelineItem--condensed"> <div class="TimelineItem-badge"> <svg class="octicon octicon-git-commit" width="16" height="18" viewBox="0 0 16 18" aria-hidden="true" > <path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"> </path> </svg> </div> <div class="TimelineItem-body"> GeeksforGeeks condensed 3 </div> </div> </div> </div> </body> </html>
Producción:
Primer CSS TimelineItem–condensado
Referencia: https://primer.style/css/components/timeline#timelineitem–condensed
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA