Collection

Plain text collection

Linked item
Unlinked item
Unlinked item

Linked item

Unlinked item

Unlinked item

<div class="o-grid">

    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d34573c3b">
    
    
            <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6605d34573b5f">
    
    
    
     
            <div class="c-collection__content">
            Linked item
        </div>
    
    </a>  
            <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573bb0">
    
    
    
     
            <div class="c-collection__content">
            Unlinked item
        </div>
    
    </div>  
            <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573bdd">
    
    
    
     
            <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="6605d34573c72">
    
             
                <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="6605d34573cf6">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573cc6">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573d6f">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573d44">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573dc4">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573d9c">
    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://helsingborg.se"],
                  'Unlinked item',
                  ['content' => 'Unlinked item', 'link' => false],
              ], 
  
          ]
      )
      @endcollection
    </div>

</div>

Multiline text collection

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="6605d34573f3f">
    
    
            <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6605d34573e91">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="6605d34573e3c">
    This is a multiline
</h2>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573e67">
    We also have defined link.
</p>
        </div>
    
    </a>
          <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34573f18">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h3 class="c-typography c-typography__variant--h3" data-uid="6605d34573ec1">
    This is a multiline
</h3>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573ef0">
    Nothing more than that.
</p>
        </div>
    
    </div>
    </div>  </div>

  <div class="o-grid-4">
        <!-- collection.blade.php -->
<div class="c-collection" data-uid="6605d345740f2">
    
    
            <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="6605d34573fc0">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34573f68">
    This is a multiline with an icon
</h4>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34573f8f">
    We also have defined link.
</p>
        </div>
    
    </a>  
          <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345740ce">
     
        <div class="c-collection__icon">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--assignment c-icon--material c-icon--material-assignment material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="assignment" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6605d34574028">
                assignment
    </span>
          </div>
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574086">
    This is a multiline with an icon
</h4>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345740aa">
    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 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="6605d345743a1">
    
    
            <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345741a3">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d3457414a">
    This is a multiline
</h4>              <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457416d">
    We also have defined a icon and a action link.
</p>
        </div>
    
    </div>
            <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345742f8">
     
        <div class="c-collection__icon">
                  <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="home" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6605d345741d9">
                home
    </span>
            </div>
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d3457420c">
    I'm an imposter!
</h4>              <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574232">
    I use my slots to mimic the above collection item.
</p>
        </div>
    
     
        <div class="c-collection__secondary">
            <a class="c-link" id="" href="https://link.link" target="_top" data-uid="6605d345742bd">
        <!-- icon.blade.php -->
    <span class="c-icon c-icon--star c-icon--material c-icon--material-star material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="star" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6605d34574265">
                star
    </span>
    </a>
        </div>
    </div>
            <!-- collection__item.blade.php -->
<a class="c-collection__item c-collection__item--action" href="http://helsingborg.se" data-uid="6605d34574371">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574324">
    This is a multiline
</h4>              <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457434a">
    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://helsingborg.se'
        ])
          @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

Collection modifier

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

Linked item

Unlinked item

Unlinked item

Collection modifier

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

Linked item

Unlinked item

Unlinked item

Collection modifier

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

Linked item

Unlinked item

Unlinked item

Collection modifier

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

Linked item

Unlinked item

Unlinked item

Collection modifier

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

Linked item

Unlinked item

Unlinked item

Collection modifier

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

Linked item

Unlinked item

Unlinked item

<div class="o-grid">
    
    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection c-collection--bordered" data-uid="6605d34574405">
    
             
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d3457447c">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574430">
    Collection modifier
</h4>                
                                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574457">
    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://helsingborg.se" data-uid="6605d345744cb">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345744a6">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574518">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345744f4">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574561">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457453f">
    Unlinked item
</p>
        </div>
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection c-collection--compact" data-uid="6605d3457458e">
    
             
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345745fd">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d345745b4">
    Collection modifier
</h4>                
                                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345745da">
    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://helsingborg.se" data-uid="6605d34574651">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574623">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574695">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574676">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345746dc">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345746b6">
    Unlinked item
</p>
        </div>
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection c-collection--sharp" data-uid="6605d34574703">
    
             
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574765">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574726">
    Collection modifier
</h4>                
                                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574746">
    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://helsingborg.se" data-uid="6605d345747a7">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574788">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345747e9">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345747ca">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574829">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d3457480a">
    Unlinked item
</p>
        </div>
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection c-collection--sharp-bot" data-uid="6605d3457484f">
    
             
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345748b1">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574871">
    Collection modifier
</h4>                
                                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574892">
    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://helsingborg.se" data-uid="6605d345748f3">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345748d3">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574936">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574916">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574976">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574958">
    Unlinked item
</p>
        </div>
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection c-collection--sharp-top" data-uid="6605d3457499c">
    
             
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d345749ff">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d345749be">
    Collection modifier
</h4>                
                                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d345749de">
    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://helsingborg.se" data-uid="6605d34574a42">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574a22">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574a84">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574a65">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574ae3">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574ac0">
    Unlinked item
</p>
        </div>
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
          <!-- collection.blade.php -->
<div class="c-collection c-collection--unbox" data-uid="6605d34574b0e">
    
             
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574b7c">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="6605d34574b34">
    Collection modifier
</h4>                
                                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574b59">
    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://helsingborg.se" data-uid="6605d34574bc6">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574ba2">
    Linked item
</p>
        </div>
    
    </a>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574c10">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574bee">
    Unlinked item
</p>
        </div>
    
    </div>         
                <!-- collection__item.blade.php -->
<div class="c-collection__item" data-uid="6605d34574c63">
    
    
    
     
            <div class="c-collection__content">
            <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--p" data-uid="6605d34574c37">
    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(
          [
              $modifier => true,
              'list' => [
                  ['title' => 'Collection modifier', 'content' => 'This utilizes the "' . $modifier . '" and will therefore display differently.'],
                  ['content' => 'Linked item', 'link' => "https://helsingborg.se"],
                  'Unlinked item',
                  ['content' => 'Unlinked item', 'link' => false],
              ], 
  
          ]
      )
      @endcollection
    </div>
  @endforeach
</div>

Blade component parameters

Key Default value Type Available values Description
componentElement div string - The element type of list.
list false boolean - A array input list, contains 'content' and 'link' array keys.
bordered false boolean - Adds borders.
compact false boolean - If the list should be displayed in a compressed format.
sharp false boolean - Every single edge as sharp as hell, be careful!
sharpBottom false boolean - Makes the bottom really sharp. Yep.
sharpTop false boolean - Makes the top really sharp. Yep.
unbox false boolean - Removes the border.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Collection/collection.json