<div class="download-link">
    <a href="#"><i class="fa-solid fa-download"></i> Download</a>
</div>
  • Content:
    .vertical-card {
      width: 400px;
      height: fit-content;
      display: inline-block;
      border: 1px solid var(--text-color);
      border-radius: 6px;
      overflow: hidden;
    }
    
    .vertical-card .thumbnail {
      border-radius: 6px 6px 0 0;
      max-width: 400px;
      max-height: 518px;
    }
    
    .vertical-card .content {
      margin-top: -15px;
      padding: 0px 17px;
    }
    
    .vertical-card h2 {
      color: var(--purple-800-brand);
      font-size: 35px;
      margin: .5em 0;
    }
    
    .vertical-card p {
      margin-top: 0;
      margin-bottom: .973em;
    }
    
    .vertical-card .btn {
      display: inline-block;
      width: 100%;
      text-align: center;
      margin: 0 0 .973em 0;
    }
    
    .vertical-card .btn-group .btn {
      width: 174px;
    }
    
    .vertical-card .btn-group .btn:first-child {
      margin-right: 11px;
    }
    
    .horizontal-card {
      display: grid;
      grid-template-columns: 250px 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "thumbnail content"
        "thumbnail btns";
      column-gap: 1em;
      row-gap: 0px;
      border: 1px solid var(--text-color);
      border-radius: 6px;
      max-width: calc(250px + 353px + 1em);
    }
    
    .horizontal-card .thumbnail {
      grid-area: thumbnail;
      border-radius: 6px 0 0 6px;
      max-width: 250px;
      max-height: 323px;
    }
    
    .horizontal-card h2 {
      color: var(--purple-800-brand);
      font-size: 35px;
      margin: .5em 0;
    }
    
    .horizontal-card .content {
      grid-area: content;
      padding-right: 17px;
    }
    
    .horizontal-card .btn-group {
      grid-area: btns;
      padding-right: 17px;
      display: flex;
      flex-direction: column;
      gap: 1em;
      align-items: flex-end;
    }
    
    .horizontal-card .btn {
      display: inline-block;
      margin: 0;
      width: 100%;
      text-align: center;
      height: fit-content;
    }
    
    .horizontal-card .btn-group .btn:last-child {
      margin-bottom: .6em;
    }
    
    .download-link a {
      display: block;
      color: var(--purple-800-brand);
      text-decoration: none;
      margin-bottom: .75em;
    }
    
    .download-link a i {
      margin-right: .25em;
    }
    
    .download-link a:hover {
      text-decoration: underline;
    }
  • URL: /components/raw/download_card/download_card.css
  • Filesystem Path: components/02-components/download_card/download_card.css
  • Size: 1.9 KB

Usage Guidelines

  • If you have two downloads, make sure they are related (i.e. translations)
  • On vertical card, if you have 3 or more downloads, use a dropdown button
  • On horizontal card, if you have 4 or more downloads, use a dropdown button