Documents

When to use this component

Use the documents component to show and link to documents on a page related to the content of that specific page.

When not to use this component

Do not use the documents component to show other related information than documents or to show other links than links to documents.

How it works

The documents component uses the file download component to show and link to documents. The default standalone link style is used. The file download components are placed in a list.

When there are more than 3 documents to show, only the first 3 documents are shown. The remaining documents are in a second list that is hidden using an accordion component.

<div class="documents accordion">
  {% include '@heading' with {
    'type': 'h2',
    'heading_text': 'Documents'
  } %}
  <ul class="links">
    {% for document in documents %}
      <li>
        {% block link %}
          {% include '@file-download' with {
            link: 'javascript:(void);',
            text: document.text,
            file: {
              type: document.type,
              size: document.size
            }
          } %}
        {% endblock %}
      </li>
    {% endfor %}
  </ul>

  <h3>
    <button class="accordion--button"
            aria-expanded="false"
            aria-controls="documents--content--documents-{{ unique_id }}">
      {{ 'There are %s other documents available'|format(other_documents|length) }}
    </button>
  </h3>

  <div class="accordion--content"
    id="documents--content--documents-{{ unique_id }}">
    <ul class="links">
      {% for document in other_documents %}
        <li>
          {% include '@file-download' with {
            link: 'javascript:(void);',
            text: document.text,
            file: {
              type: document.type,
              size: document.size
            }
          } %}
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
<div class="documents accordion">
    <h2>Documents</h2>
    <ul class="links">
        <li>
            <a href='javascript:(void);' class="standalone-link" download>
                In the summertime</a>

            <span class="file-type">
                PDF
                <span class="file-size">
                    (102kb)
                </span>
            </span>
        </li>
        <li>
            <a href='javascript:(void);' class="standalone-link" download>
                When the weather is hot</a>

            <span class="file-type">
                PDF
                <span class="file-size">
                    (102kb)
                </span>
            </span>
        </li>
        <li>
            <a href='javascript:(void);' class="standalone-link" download>
                You can stretch right up and touch the sky</a>

            <span class="file-type">
                PDF
                <span class="file-size">
                    (102kb)
                </span>
            </span>
        </li>
    </ul>

    <h3>
        <button class="accordion--button" aria-expanded="false" aria-controls="documents--content--documents-1">
            There are 3 other documents available
        </button>
    </h3>

    <div class="accordion--content" id="documents--content--documents-1">
        <ul class="links">
            <li>
                <a href='javascript:(void);' class="standalone-link" download>
                    In the summertime</a>

                <span class="file-type">
                    PDF
                    <span class="file-size">
                        (102kb)
                    </span>
                </span>
            </li>
            <li>
                <a href='javascript:(void);' class="standalone-link" download>
                    When the weather is hot</a>

                <span class="file-type">
                    PDF
                    <span class="file-size">
                        (102kb)
                    </span>
                </span>
            </li>
            <li>
                <a href='javascript:(void);' class="standalone-link" download>
                    You can stretch right up and touch the sky</a>

                <span class="file-type">
                    PDF
                    <span class="file-size">
                        (102kb)
                    </span>
                </span>
            </li>
        </ul>
    </div>
</div>
{
  "unique_id": "1",
  "documents": [
    {
      "text": "In the summertime",
      "type": "PDF",
      "size": "102kb"
    },
    {
      "text": "When the weather is hot",
      "type": "PDF",
      "size": "102kb"
    },
    {
      "text": "You can stretch right up and touch the sky",
      "type": "PDF",
      "size": "102kb"
    }
  ],
  "other_documents": [
    {
      "text": "In the summertime",
      "type": "PDF",
      "size": "102kb"
    },
    {
      "text": "When the weather is hot",
      "type": "PDF",
      "size": "102kb"
    },
    {
      "text": "You can stretch right up and touch the sky",
      "type": "PDF",
      "size": "102kb"
    }
  ]
}
  • Content:
    .documents,
    .document-box { // Deprecated
      li {
        @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
    
        width: 100%;
        margin-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid;
    
        @include tablet {
          max-width: 36rem;
        }
    
        &:last-of-type {
          padding-bottom: 0;
          border: 0;
        }
      }
    
      h3 {
        @extend %h4;
      }
    
      button {
        margin-top: 2.3rem;
      }
    
      .file-size {
        margin-left: .3em;
      }
    }
    
  • URL: /components/raw/documents/_documents.scss
  • Filesystem Path: components/41-organisms/documents/_documents.scss
  • Size: 482 Bytes