Cartilla CSS Timeline TimelineItem-Break

Posted on by Rudeus Greyrat

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-Break se utiliza para crear la línea de ruptura horizontal en la línea de tiempo.

En este artículo, discutiremos Primer CSS TimelineItem-Break.

Primer CSS TimelineItem-Break Class:

  • TimelineItem-break: esta clase se utiliza para crear la línea de ruptura horizontal en la línea de tiempo.

Sintaxis:

<div class="TimelineItem">
  <div class="TimelineItem-badge">
     ...
  </div>
  <div class="TimelineItem-break"></div>
  <div class="TimelineItem-body">
     ...
  </div>
</div>

Ejemplo 1: El siguiente ejemplo demuestra Primer CSS TimelineItem-Break.

HTML

<!DOCTYPE html>
<html>
  
<head>
  <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-Break </h3>
    </div> <br>
  
    <div class="d-flex flex-justify-center">
        <div class="d-flex flex-column">
          <div class="TimelineItem">
            <div class="TimelineItem-badge">
              <svg class="octicon"
                   width="18" height="18" 
                   viewBox="0 0 16 16" >
                <path fill-rule="evenodd" clip-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 TimelineItem-Break
            </div>
          </div>
          <div class="TimelineItem-break ml-0"></div>
  
          <div class="TimelineItem">
            <div class="TimelineItem-badge">
              <svg class="octicon"
                   width="18" height="18" 
                   viewBox="0 0 16 16" >
                <path fill-rule="evenodd" clip-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 TimelineItem-Break
            </div>
          </div>
        </div>
    </div>
</body>
</html>

Producción:

Primer CSS TimelineItem-Break

Ejemplo 2: El siguiente ejemplo demuestra Primer CSS TimelineItem-Break.

HTML

<!DOCTYPE html>
<html>
  
<head>
  <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-Break </h3>
    </div> <br>
  
    <div class="d-flex flex-justify-center">
        <div class="d-flex flex-column">
          <div class="TimelineItem">
            <div class="TimelineItem-badge color-bg-success-emphasis 
                        color-fg-on-emphasis" >
              <svg class="octicon"
                   width="18" height="18" 
                   viewBox="0 0 16 16" >
                <path fill-rule="evenodd" clip-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">
              GFG TimelineItem-Break
            </div>
          </div>
          <div class="TimelineItem-break ml-0"></div>
  
          <div class="TimelineItem">
            <div class="TimelineItem-badge color-bg-done-emphasis 
                        color-fg-on-emphasis" >
              <svg class="octicon"
                   width="18" height="18" 
                   viewBox="0 0 16 16" >
                <path fill-rule="evenodd" clip-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">
              GFG TimelineItem-Break
            </div>
          </div>
          <div class="TimelineItem-break ml-0"></div>
  
          <div class="TimelineItem">
            <div class="TimelineItem-badge color-bg-danger-emphasis 
                        color-fg-on-emphasis">
              <svg class="octicon"
                   width="18" height="18" 
                   viewBox="0 0 16 16" >
                <path fill-rule="evenodd" clip-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">
              GFG TimelineItem-Break
            </div>
          </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Primer CSS TimelineItem-Break

Referencia: https://primer.style/css/components/timeline#timelineitem-break

Publicación traducida automáticamente

Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *