Collection

The Collection component provides a reusable pattern for collection in the interface.

Plain text collection

Just a plain and simple collection. The first item is linked in each list. First collection utilizes the slot, and the second utlizes the array list input method.

Linked item

Unlinked item

Linked item

Unlinked item

<div class="o-grid">
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection" data-uid="6a44f0ac8b14b" data-component="collection">
      <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6a44f0ac8afde" data-component="collection__item">
      <div class="c-collection__content">
        Linked item
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8b06d" data-component="collection__item">
        <div class="c-collection__content">
          Unlinked item
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8b0c1" data-component="collection__item">
        <div class="c-collection__content">
          Unlinked item
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection" data-uid="6a44f0ac8b1a3" data-component="collection">
      <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac8b27e" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8b229" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8b318" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8b2d0" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8b3a8" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8b363" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="o-grid">

    <div class="o-grid-4">
      @collection()
  
        @collection__item(['link' => "https://link.link"])
          Linked item
        @endcollection__item
  
        @collection__item()
            Unlinked item
        @endcollection__item
  
        @collection__item()
            Unlinked item
        @endcollection__item
  
      @endcollection
    </div>
  
    <div class="o-grid-4">
      @collection(
          [
              'list' => [
                  ['content' => 'Linked item', 'link' => "https://getmunicipio.com"],
                  'Unlinked item',
                  ['content' => 'Unlinked item', 'link' => false],
              ], 
  
          ]
      )
      @endcollection
    </div>

</div>

Multiline text collection

Sometimes you just want more in life than single rows.

This is a multiline

We also have defined link.

This is a multiline

Nothing more than that.

This is a multiline with an icon

We also have defined link.

This is a multiline with an icon

Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="o-grid">
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection" data-uid="6a44f0ac8bab0" data-component="collection">
      <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6a44f0ac8b987" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h4 -->
        <h2 class="c-typography c-typography__variant--h2" data-uid="6a44f0ac8b8d4" data-component="typography">
          This is a multiline
        </h2><!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8b933" data-component="typography">
          We also have defined link.
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8ba68" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h3 class="c-typography c-typography__variant--h3" data-uid="6a44f0ac8b9da" data-component="typography">
            This is a multiline
          </h3><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8ba21" data-component="typography">
            Nothing more than that.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection" data-uid="6a44f0ac8bf78" data-component="collection">
      <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6a44f0ac8bb92" data-component="collection__item">
      <div class="c-collection__icon">
        <!-- icon.blade.php -->
      </div>
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h4 -->
        <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8baf9" data-component="typography">
          This is a multiline with an icon
        </h4><!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8bb3b" data-component="typography">
          We also have defined link.
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8bf2d" data-component="collection__item">
        <div class="c-collection__icon">
          <!-- icon.blade.php -->
        </div>
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8be97" data-component="typography">
            This is a multiline with an icon
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8bee3" data-component="typography">
            Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="o-grid">
  <div class="o-grid-4">
    @collection([])
      @collection__item(['link' => 'https://link.link'])
        @typography(['element' => 'h4'])
          This is a multiline
        @endtypography
        @typography([])
          We also have defined link.
        @endtypography
      @endcollection__item

      @collection__item()
        @typography(['element' => 'h4'])
          This is a multiline
        @endtypography
        @typography([])
          Nothing more than that. 
        @endtypography
      @endcollection__item
    @endcollection
  </div>

  <div class="o-grid-4">
    @collection([])
      @collection__item([
        'icon' => 'account_circle',
        'link' => 'https://link.link'
      ])
        @typography(['element' => 'h4'])
          This is a multiline with an icon
        @endtypography
        @typography([])
          We also have defined link.
        @endtypography
      @endcollection__item
  
      @collection__item()
  
        @slot('prefix')
          <div class="c-collection__icon">
            @icon(['icon' => 'assignment', 'size' => 'md'])
            @endicon
          </div>
        @endslot
  
        @typography(['element' => 'h4'])
          This is a multiline with an icon
        @endtypography
        @typography([])
          Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
        @endtypography
      @endcollection__item
    @endcollection
    </div>
</div>

Collection with secondary

This is a collection utilizing actions / secondary area.

This is a multiline

We also have defined a icon and a action link.

I'm an imposter!

I use my slots to mimic the above collection item.

This is a multiline

This has the same configuration as above. But applied a link to the item. Actions then dissapear.

<div class="o-grid">
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection" data-uid="6a44f0ac8c90c" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8c530" data-component="collection__item">
        <div class="c-collection__icon">
          <!-- icon.blade.php -->
        </div>
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8c48f" data-component="typography">
            This is a multiline
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8c4e5" data-component="typography">
            We also have defined a icon and a action link.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8c78d" data-component="collection__item">
        <div class="c-collection__icon">
          <!-- icon.blade.php -->
        </div>
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8c633" data-component="typography">
            I'm an imposter!
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8c676" data-component="typography">
            I use my slots to mimic the above collection item.
          </p>
        </div>
        <div class="c-collection__secondary">
          <a class="c-link" href="https://link.link" target="_top" data-uid="6a44f0ac8c741" data-component="link"><!-- icon.blade.php -->
           </a>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="http://getmunicipio.com" data-uid="6a44f0ac8c86b" data-component="collection__item">
      <div class="c-collection__icon">
        <!-- icon.blade.php -->
      </div>
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h4 -->
        <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8c7e3" data-component="typography">
          This is a multiline
        </h4><!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8c825" data-component="typography">
          This has the same configuration as above. But applied a link to the item. Actions then dissapear.
        </p>
      </div></a>
    </div>
  </div>
</div>

<div class="o-grid">
  <div class="o-grid-4">
    @collection()
        @collection__item([
          'icon' => 'home',
          'action' => [
            'icon' => 'star',
            'link' => 'http://link.link'
          ]
        ])
          @typography(['element' => 'h4'])
            This is a multiline
          @endtypography
          @typography([])
            We also have defined a icon and a action link.
          @endtypography
        @endcollection__item

        @collection__item()

          @slot('prefix')
            <div class="c-collection__icon">
              @icon(['icon' => 'home', 'size' => 'md'])
              @endicon
            </div>
          @endslot

          @typography(['element' => 'h4'])
            I'm an imposter!
          @endtypography
          @typography([])
            I use my slots to mimic the above collection item. 
          @endtypography

          @slot('secondary')
            @link(['href' => 'https://link.link'])
              @icon(['icon' => 'star', 'size' => 'md'])
              @endicon
            @endlink
          @endslot

        @endcollection__item

        @collection__item([
          'icon' => 'home',
          'action' => [
            'icon' => 'star',
            'link' => 'http://link.link'
          ],
          'link' => 'http://getmunicipio.com'
        ])
          @typography(['element' => 'h4'])
            This is a multiline
          @endtypography
          @typography([])
            This has the same configuration as above. But applied a link to the item. Actions then dissapear.
          @endtypography
        @endcollection__item
    @endcollection
  </div>
</div>

Collection with modifiers

Thie is a collections with all modifiers.

Collection modifier

This utilizes the "bordered" and will therefore display differently.

Linked item

Unlinked item

Collection modifier

This utilizes the "compact" and will therefore display differently.

Linked item

Unlinked item

Collection modifier

This utilizes the "sharp" and will therefore display differently.

Linked item

Unlinked item

Collection modifier

This utilizes the "sharpBottom" and will therefore display differently.

Linked item

Unlinked item

Collection modifier

This utilizes the "sharpTop" and will therefore display differently.

Linked item

Unlinked item

Collection modifier

This utilizes the "unbox" and will therefore display differently.

Linked item

Unlinked item

<div class="o-grid">
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered" data-uid="6a44f0ac8ccbf" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8cdad" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8cd1b" data-component="typography">
            Collection modifier
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8cd66" data-component="typography">
            This utilizes the "bordered" and will therefore display differently.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac8ce62" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8ce14" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8cf14" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8cebd" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8cfc7" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8cf63" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered c-collection--compact" data-uid="6a44f0ac8d020" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8d0f5" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8d06a" data-component="typography">
            Collection modifier
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8d0b0" data-component="typography">
            This utilizes the "compact" and will therefore display differently.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac8d185" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8d13e" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8d213" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8d1d0" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac8d29b" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac8d25a" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered c-collection--sharp" data-uid="6a44f0ac8d2ee" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9bbb6" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac8d335" data-component="typography">
            Collection modifier
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bb1b" data-component="typography">
            This utilizes the "sharp" and will therefore display differently.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac9bc76" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bc21" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9bd10" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bcc8" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9bda2" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bd5c" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered c-collection--sharp-bot" data-uid="6a44f0ac9be14" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9befa" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac9be70" data-component="typography">
            Collection modifier
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bebc" data-component="typography">
            This utilizes the "sharpBottom" and will therefore display differently.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac9bf7a" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bf3a" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9bff9" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9bfbd" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c072" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c037" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered c-collection--sharp-top" data-uid="6a44f0ac9c0bd" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c175" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac9c0fd" data-component="typography">
            Collection modifier
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c139" data-component="typography">
            This utilizes the "sharpTop" and will therefore display differently.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac9c211" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c1bd" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c2dc" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c271" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c3a8" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c346" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid-4">
    <!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered c-collection--unbox" data-uid="6a44f0ac9c42e" data-component="collection">
      <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c52e" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: h4 -->
          <h4 class="c-typography c-typography__variant--h4" data-uid="6a44f0ac9c4a0" data-component="typography">
            Collection modifier
          </h4><!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c4eb" data-component="typography">
            This utilizes the "unbox" and will therefore display differently.
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" href="https://getmunicipio.com" data-uid="6a44f0ac9c5d7" data-component="collection__item">
      <div class="c-collection__content">
        <!-- typography.blade.php   original: p -->
        <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c574" data-component="typography">
          Linked item
        </p>
      </div></a> <!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c667" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c623" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div><!-- collection__item.blade.php -->
      <div class="c-collection__item" data-uid="6a44f0ac9c6f1" data-component="collection__item">
        <div class="c-collection__content">
          <!-- typography.blade.php   original: p -->
          <p class="c-typography c-typography__variant--p" data-uid="6a44f0ac9c6ae" data-component="typography">
            Unlinked item
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="o-grid">
  @foreach(['bordered', 'compact', 'sharp', 'sharpBottom', 'sharpTop', 'unbox'] as $modifier)  
    <div class="o-grid-4">
      @collection(
          [
              'bordered' => true,
              $modifier => true,
              'list' => [
                  ['title' => 'Collection modifier', 'content' => 'This utilizes the "' . $modifier . '" and will therefore display differently.'],
                  ['content' => 'Linked item', 'link' => "https://getmunicipio.com"],
                  'Unlinked item',
                  ['content' => 'Unlinked item', 'link' => false],
              ], 
  
          ]
      )
      @endcollection
    </div>
  @endforeach
</div>

Collection in card

Shows a bordered collection wrapped in a panel card.

Item label

<div class="c-card c-card--panel c-card--ratio-16-9" data-uid="6a44f0ac9d126" data-component="card">
  <div class="c-card__paint-container">
    <div class="c-card__header" data-uid="6a44f0ac9cc90" data-component="card__header">
      <!-- typography.blade.php   original: h2 -->
      <h2 class="c-typography module-title u-margin--0 c-typography__variant--h6" data-uid="6a44f0ac9cbf2" data-component="typography">
        Read more about this topic
      </h2>
    </div><!-- collection.blade.php -->
    <div class="c-collection c-collection--bordered c-collection--sharp-top" data-uid="6a44f0ac9d086" data-component="collection">
      <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-uid="6a44f0ac9cd30" data-component="collection__item">
      <div class="c-collection__icon">
        <!-- icon.blade.php -->
      </div>
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h2 -->
        <h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-uid="6a44f0ac9cce1" data-component="typography">
          Item label
        </h2>
      </div></a> <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-uid="6a44f0ac9ce43" data-component="collection__item">
      <div class="c-collection__icon">
        <!-- icon.blade.php -->
      </div>
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h2 -->
        <h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-uid="6a44f0ac9cdf2" data-component="typography">
          Item label
        </h2>
      </div></a> <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-uid="6a44f0ac9cf1d" data-component="collection__item">
      <div class="c-collection__icon">
        <!-- icon.blade.php -->
      </div>
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h2 -->
        <h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-uid="6a44f0ac9ced9" data-component="typography">
          Item label
        </h2>
      </div></a> <!-- collection__item.blade.php -->
       <a class="c-collection__item c-collection__item--action" id="item-52147-0" aria-labelledby="item-52147-0-title" href="#" data-uid="6a44f0ac9cff2" data-component="collection__item">
      <div class="c-collection__icon">
        <!-- icon.blade.php -->
      </div>
      <div class="c-collection__content">
        <!-- typography.blade.php   original: h2 -->
        <h2 class="c-typography c-typography__variant--h4" id="item-52147-0-title" data-uid="6a44f0ac9cfb0" data-component="typography">
          Item label
        </h2>
      </div></a>
    </div>
  </div>
</div>


@card([
    'classList' => ['c-card--panel']
])
    @card__header()
        @typography([
            'element' => 'h2',
            'variant' => 'h6',
            'classList' => [
                'module-title',
                'u-margin--0'
            ]
        ])
            Read more about this topic
        @endtypography
    @endcard__header

    @collection([
        'bordered' => true,
        'sharpTop' => true
    ])
      @for ($i = 0; $i < 4; $i++)
        @collection__item([
            'icon' => 'arrow_forward',
            'link' => '#',
            'attributeList' => [
                'id' => 'item-52147-0',
                'aria-labelledby' => 'item-52147-0-title'
            ]
        ])
            @typography([
                'element' => 'h2',
                'variant' => 'h4',
                'attributeList' => [
                    'id' => 'item-52147-0-title'
                ]
            ])
                Item label
            @endtypography
        @endcollection__item
      @endfor
    @endcollection
@endcard

API

Parameter	Default	Description
componentElement	div	The element type of list.
list	false	A array input list, contains 'content' and 'link' array keys.
bordered	false	Adds borders.
compact	false	If the list should be displayed in a compressed format.
sharp	false	Every single edge as sharp as hell, be careful!
sharpBottom	false	Makes the bottom really sharp. Yep.
sharpTop	false	Makes the top really sharp. Yep.
unbox	false	Removes the border.

Subcomponents

Child components for collection, including purpose and supported Blade parameters.

Collection Item

Blade directive: @collection__item()

The type of list item. Default: li

Parameter	Default	Type	Purpose
componentElement	div	string	-
prefix		string	-
icon	false	boolean	-
iconLast	false	boolean	-
action	false	boolean	-
secondary		string	-
link		string	-
bordered	false	boolean	Shows a border around the item.
classList	[]	array	Additional CSS classes added to the wrapping element.
attributeList	[]	array	Additional HTML attributes added to the wrapping element.

@collection__item([
    'componentElement' => 'div',
    'prefix' => '',
    'icon' => false,
    'iconLast' => false,
    'action' => false,
    'secondary' => '',
    'link' => '',
    'bordered' => false,
])
@endcollection__item

CSS API

Variable	Default	Type	Values	Description
--c-collection--border-radius	var(--border-radius)	range	-	Border Radius
--c-collection--border-width	var(--border-width)	range	-	Size
--c-collection--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-collection--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-collection--color--primary	var(--color--primary)	color	-	Primary
--c-collection--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-collection--color--background-border	var(--color--background-border)	color	-	Manual companion token for borders on background surfaces.
--c-collection--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-collection--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-collection--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-collection--font-size-100	var(--font-size-100)	range	-	Base font size.

Similar components

Icon Section Option Accordion