GDL - Global Design Language

Attachments: Default 

<div class="c-attachments o-bg-light u-p-small">
    <h3 class="u-label-02 u-color-base">Allegati</h3>
    <ul class="u-list-none u-list-reset u-mb-none">

        <li class="c-attachments__item">
            <a href="#" class="o-link-text">
                <svg class="o-icon o-icon--sm u-mr-xxsmall">
                    <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <span class="u-label-03">Titolo dell&#39;allegato</span>
            </a>
        </li>

        <li class="c-attachments__item">
            <a href="#" class="o-link-text">
                <svg class="o-icon o-icon--sm u-mr-xxsmall">
                    <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <span class="u-label-03">Titolo dell&#39;allegato</span>
            </a>
        </li>

        <li class="c-attachments__item">
            <a href="#" class="o-link-text">
                <svg class="o-icon o-icon--sm u-mr-xxsmall">
                    <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <span class="u-label-03">Titolo dell&#39;allegato</span>
            </a>
        </li>

        <li class="c-attachments__item">
            <a href="#" class="o-link-text">
                <svg class="o-icon o-icon--sm u-mr-xxsmall">
                    <use xlink:href="#icon-arrow-down-circle"></use>
                </svg>
                <span class="u-label-03">Titolo dell&#39;allegato</span>
            </a>
        </li>

    </ul>
</div>
 
<div class="c-attachments o-bg-light u-p-small">
  <h3 class="u-label-02 u-color-base">Allegati</h3>
  <ul class="u-list-none u-list-reset u-mb-none">

    {% for item in files %}  
      <li class="c-attachments__item">
        <a href="#" class="o-link-text">
          <svg class="o-icon o-icon--sm u-mr-xxsmall"><use xlink:href="#icon-arrow-down-circle"></use></svg>
          <span class="u-label-03">{{ item }}</span>
        </a>
      </li>  
    {% endfor %}

  </ul>
</div>
 
{
  "files": [
    "Titolo dell'allegato",
    "Titolo dell'allegato",
    "Titolo dell'allegato",
    "Titolo dell'allegato"
  ]
}
  • Content: 
    // Name:            Attachments
// Description:     Attached files to an item page
//
// Component:       `c-attachments`
//
// Variants:        `c-attachments--gallery`
//
// Dependencies:    `settings/spacing.tokens`
//                  `v7_colors`
//                  `themes/[theme-file]`
//
// ========================================================================


.c-attachments {

  --attachment-bg: #{$ui-02};
  
  border-top: 3px solid var(--theme-color);

  &--gallery {
    background-color: var(--attachment-bg);
  }

  &__item:not(:last-child) {
    padding-bottom: $padding-small;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: $margin-small;
  }
}
  • URL: /components/raw/attachments/attachments.scss
  • Filesystem Path: src/lib/components/attachments/attachments.scss
  • Size: 690 Bytes

Widget: Allegati articolo Template: - Link: url -