grid-line-arrow.pug

extend __LAYOUT-TEMPLATE.pug
block vars
  - var pageTitle = "Grid line arrow"

block content

  h1!= pageTitle
  mixin grid-line-arrow
    .card.gradient-overlay-blue-full(style="background: url(https://picsum.photos/600/400/?random) no-repeat; background-size: cover;")
      .card-section.small-pt2.medium-pt5.text-white.z1
        h5.small-m0 Eliminate complexity and create a superior digital experience
      .card-divider.bg-transparent.small-pt0.text-right.z1
        hr.small-mt0.small-mb1.opacity-50.white
        .grid-x.grid-padding-x.expanded.align-middle
          .cell.flex-container.align-right
            h5.anim-icon
              a.text-normal.text-green(href="#")
                i.arrow-solid-right.fw600
                .anim-text View


  //- ==============================  ARROW ONLY  ==============================
  .grid-x.grid-padding-x.small-up-1.medium-up-2.large-up-3.align-center
    .cell.cell-block
      +grid-line-arrow
    .cell.cell-block
      +grid-line-arrow
    .cell.cell-block
      +grid-line-arrow
    .cell.cell-block
      +grid-line-arrow
    .cell.cell-block
      +grid-line-arrow
    .cell.cell-block
      +grid-line-arrow