FTSE Russell Styleguide

Pdf Download Grid 

<ul class="pdf-download-grid grid">

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

    <li class="col-6 col-lg-3"><a href="#" class="btn-pdf"><img src="../../assets/images/research-download.png" alt=""> </a>
    </li>

</ul>
 
<ul class="pdf-download-grid grid">
   {% for download in downloads %}
    <li class="col-6 col-lg-3">{% render '@button_pdf' %}</li>
  {% endfor %}
</ul>
 
{
  "title": "Research &amp; Insignts",
  "downloads": [
    {
      "name": "Download 1",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    },
    {
      "name": "Download 2",
      "link": "#",
      "image_src": "../../assets/images/research-download.png"
    }
  ]
}
  • Content: 
    .pdf-download-grid {
  list-style: none;
  margin: 0 -.4375rem;
  padding: 0;
  grid-template-columns: 1fr 1fr;

  @include mq($breakpoint-md) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0 -.625rem;
  }

  li {
    padding: .4375rem;
    flex-basis: calc(50% - .875rem);

    @include mq($breakpoint-md) {
      padding: .625rem;
      flex-basis: calc(25% - 1.25rem);
    }
  }
}
  • URL: /components/raw/pdf-download-grid/_pdf-download-grid.scss
  • Filesystem Path: src/components/molecules/pdf-download-grid/_pdf-download-grid.scss
  • Size: 395 Bytes

There are no notes for this item.