Collection

Collection

Collections are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. This component consists of multiple interacting components (@collection and @collection__item).

Plain text collection

Linked item
Unlinked item
Unlinked item

Linked item

Unlinked item

Unlinked item

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.

<div class="o-grid">

    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa49310027" class="c-collection" data-uid="61efa49310023">
    
    
            <!-- collection__item.blade.php -->
<a id="61efa4930fe28" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="61efa4930fe21">
    
    
            <div class="c-collection__content">
            Linked item
        </div>
    
    
    </a>  
        <!-- collection__item.blade.php -->
<div id="61efa4930fe9c" class="c-collection__item" data-uid="61efa4930fe99">
    
    
            <div class="c-collection__content">
            Unlinked item
        </div>
    
    
    </div>  
        <!-- collection__item.blade.php -->
<div id="61efa4930fee3" class="c-collection__item" data-uid="61efa4930fee1">
    
    
            <div class="c-collection__content">
            Unlinked item
        </div>
    
    
    </div>
    </div>    </div>
  
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa49310086" class="c-collection" data-uid="61efa49310083">
    
             
            <!-- collection__item.blade.php -->
<a id="61efa49310164" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa49310161">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49310109" class="c-typography c-typography__variant--p" data-uid="61efa49310106">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa49310204" class="c-collection__item" data-uid="61efa49310200">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa493101c0" class="c-typography c-typography__variant--p" data-uid="61efa493101bd">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa4931028f" class="c-collection__item" data-uid="61efa4931028d">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa4931024e" class="c-typography c-typography__variant--p" data-uid="61efa4931024b">
    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.

account_circle

This is a multiline with an icon

We also have defined link.

assignment

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.

Sometimes you just want more in life than single rows.

<div class="o-grid">
  <div class="o-grid-4">
    <!-- collection.blade.php -->
<div id="61efa49310a6a" class="c-collection" data-uid="61efa49310a67">
    
    
            <!-- collection__item.blade.php -->
<a id="61efa4931095e" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="61efa4931095b">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa493108cb" class="c-typography c-typography__variant--p" data-uid="61efa493108c7">
    This is a multiline
</h4>        <!-- typography.blade.php  -->
<p id="61efa49310917" class="c-typography c-typography__variant--p" data-uid="61efa49310915">
    We also have defined link.
</p>
        </div>
    
    
    </a>
      <!-- collection__item.blade.php -->
<div id="61efa49310a27" class="c-collection__item" data-uid="61efa49310a25">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa493109a5" class="c-typography c-typography__variant--p" data-uid="61efa493109a3">
    This is a multiline
</h4>        <!-- typography.blade.php  -->
<p id="61efa493109e7" class="c-typography c-typography__variant--p" data-uid="61efa493109e5">
    Nothing more than that.
</p>
        </div>
    
    
    </div>
    </div>  </div>

  <div class="o-grid-4">
    <!-- collection.blade.php -->
<div id="61efa49310d5a" class="c-collection" data-uid="61efa49310d58">
    
    
            <!-- collection__item.blade.php -->
<a id="61efa49310b32" class="c-collection__item c-collection__item--action" href="https://link.link" data-uid="61efa49310b2f">
    
     
        <div class="c-collection__icon">
            <!-- icon.blade.php -->
    <i id="61efa49310bb1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa49310bac">
                    account_circle
            </i>
        </div>
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa49310ab0" class="c-typography c-typography__variant--p" data-uid="61efa49310aad">
    This is a multiline with an icon
</h4>        <!-- typography.blade.php  -->
<p id="61efa49310af1" class="c-typography c-typography__variant--p" data-uid="61efa49310aee">
    We also have defined link.
</p>
        </div>
    
    
    </a>  
      <!-- collection__item.blade.php -->
<div id="61efa49310d17" class="c-collection__item" data-uid="61efa49310d15">
     
        <div class="c-collection__icon">
            <!-- icon.blade.php -->
    <i id="61efa49310c13" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa49310c0f">
                    assignment
            </i>
          </div>
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa49310c61" class="c-typography c-typography__variant--p" data-uid="61efa49310c5e">
    This is a multiline with an icon
</h4>        <!-- typography.blade.php  -->
<p id="61efa49310cd2" class="c-typography c-typography__variant--p" data-uid="61efa49310cce">
    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

home

This is a multiline

We also have defined a icon and a action link.

home

I'm an imposter!

I use my slots to mimic the above collection item.

home

This is a multiline

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

This is a collection utilizing actions / secondary area.

<div class="o-grid">
  <div class="o-grid-4">
    <!-- collection.blade.php -->
<div id="61efa49311b47" class="c-collection" data-uid="61efa49311b44">
    
    
            <!-- collection__item.blade.php -->
<div id="61efa493112e6" class="c-collection__item" data-uid="61efa493112e4">
    
     
        <div class="c-collection__icon">
            <!-- icon.blade.php -->
    <i id="61efa4931133e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa4931133a">
                    home
            </i>
        </div>
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa4931125b" class="c-typography c-typography__variant--p" data-uid="61efa49311257">
    This is a multiline
</h4>          <!-- typography.blade.php  -->
<p id="61efa493112a4" class="c-typography c-typography__variant--p" data-uid="61efa493112a2">
    We also have defined a icon and a action link.
</p>
        </div>
    
    
     
        <div class="c-collection__secondary">
            <a id="61efa493115b8" class="c-link" target="_top" href="http://link.link" role="link" data-uid="61efa493115b3">
        <!-- icon.blade.php -->
    <i id="61efa49311388" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa49311384">
                    star
            </i>
    </a>
        </div>
    </div>
        <!-- collection__item.blade.php -->
<div id="61efa493119f6" class="c-collection__item" data-uid="61efa493119f3">
     
        <div class="c-collection__icon">
              <!-- icon.blade.php -->
    <i id="61efa49311868" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa49311862">
                    home
            </i>
            </div>
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa493118b4" class="c-typography c-typography__variant--p" data-uid="61efa493118b1">
    I'm an imposter!
</h4>          <!-- typography.blade.php  -->
<p id="61efa493118f8" class="c-typography c-typography__variant--p" data-uid="61efa493118f5">
    I use my slots to mimic the above collection item.
</p>
        </div>
    
     
        <div class="c-collection__secondary">
            <a id="61efa49311993" class="c-link" target="_top" href="https://link.link" role="link" data-uid="61efa49311990">
        <!-- icon.blade.php -->
    <i id="61efa49311951" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa4931194d">
                    star
            </i>
    </a>
        </div>
    
    </div>
        <!-- collection__item.blade.php -->
<a id="61efa49311abf" class="c-collection__item c-collection__item--action" href="http://helsingborg.se" data-uid="61efa49311abc">
    
     
        <div class="c-collection__icon">
            <!-- icon.blade.php -->
    <i id="61efa49311b00" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa49311afd">
                    home
            </i>
        </div>
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa49311a3e" class="c-typography c-typography__variant--p" data-uid="61efa49311a3b">
    This is a multiline
</h4>          <!-- typography.blade.php  -->
<p id="61efa49311a7e" class="c-typography c-typography__variant--p" data-uid="61efa49311a7c">
    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

Thie is a collections with all modifiers.

<div class="o-grid">
    
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa49311eb0" class="c-collection c-collection--bordered" data-uid="61efa49311eac">
    
             
            <!-- collection__item.blade.php -->
<div id="61efa49311f9c" class="c-collection__item" data-uid="61efa49311f99">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa49311efd" class="c-typography c-typography__variant--p" data-uid="61efa49311efa">
    Collection modifier
</h4>                
                                    <!-- typography.blade.php  -->
<p id="61efa49311f53" class="c-typography c-typography__variant--p" data-uid="61efa49311f50">
    This utilizes the "bordered" and will therefore display differently.
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<a id="61efa49312025" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa49312022">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49311fe4" class="c-typography c-typography__variant--p" data-uid="61efa49311fe1">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa493120aa" class="c-collection__item" data-uid="61efa493120a8">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa4931206b" class="c-typography c-typography__variant--p" data-uid="61efa49312068">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa4931212c" class="c-collection__item" data-uid="61efa4931212a">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa493120ef" class="c-typography c-typography__variant--p" data-uid="61efa493120ec">
    Unlinked item
</p>
        </div>
    
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa4931217a" class="c-collection c-collection--compact" data-uid="61efa49312177">
    
             
            <!-- collection__item.blade.php -->
<div id="61efa4931223e" class="c-collection__item" data-uid="61efa4931223c">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa493121be" class="c-typography c-typography__variant--p" data-uid="61efa493121bb">
    Collection modifier
</h4>                
                                    <!-- typography.blade.php  -->
<p id="61efa49312200" class="c-typography c-typography__variant--p" data-uid="61efa493121fe">
    This utilizes the "compact" and will therefore display differently.
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<a id="61efa493122c4" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa493122c1">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312284" class="c-typography c-typography__variant--p" data-uid="61efa49312281">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa49312347" class="c-collection__item" data-uid="61efa49312345">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312309" class="c-typography c-typography__variant--p" data-uid="61efa49312306">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa493123cb" class="c-collection__item" data-uid="61efa493123c9">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa4931238c" class="c-typography c-typography__variant--p" data-uid="61efa49312389">
    Unlinked item
</p>
        </div>
    
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa49312417" class="c-collection c-collection--sharp" data-uid="61efa49312414">
    
             
            <!-- collection__item.blade.php -->
<div id="61efa493124e0" class="c-collection__item" data-uid="61efa493124dd">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa4931245e" class="c-typography c-typography__variant--p" data-uid="61efa4931245b">
    Collection modifier
</h4>                
                                    <!-- typography.blade.php  -->
<p id="61efa493124a1" class="c-typography c-typography__variant--p" data-uid="61efa4931249f">
    This utilizes the "sharp" and will therefore display differently.
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<a id="61efa49312565" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa49312562">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312525" class="c-typography c-typography__variant--p" data-uid="61efa49312523">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa493125eb" class="c-collection__item" data-uid="61efa493125e8">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa493125aa" class="c-typography c-typography__variant--p" data-uid="61efa493125a8">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa49312670" class="c-collection__item" data-uid="61efa4931266d">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312632" class="c-typography c-typography__variant--p" data-uid="61efa4931262f">
    Unlinked item
</p>
        </div>
    
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa493126bc" class="c-collection c-collection--sharp-bot" data-uid="61efa493126b9">
    
             
            <!-- collection__item.blade.php -->
<div id="61efa49312780" class="c-collection__item" data-uid="61efa4931277e">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa49312700" class="c-typography c-typography__variant--p" data-uid="61efa493126fe">
    Collection modifier
</h4>                
                                    <!-- typography.blade.php  -->
<p id="61efa49312742" class="c-typography c-typography__variant--p" data-uid="61efa4931273f">
    This utilizes the "sharpBottom" and will therefore display differently.
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<a id="61efa49312806" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa49312803">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa493127c6" class="c-typography c-typography__variant--p" data-uid="61efa493127c4">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa493128af" class="c-collection__item" data-uid="61efa493128ac">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312859" class="c-typography c-typography__variant--p" data-uid="61efa49312854">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa49312932" class="c-collection__item" data-uid="61efa4931292f">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa493128f4" class="c-typography c-typography__variant--p" data-uid="61efa493128f1">
    Unlinked item
</p>
        </div>
    
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa49312982" class="c-collection c-collection--sharp-top" data-uid="61efa4931297f">
    
             
            <!-- collection__item.blade.php -->
<div id="61efa49312a46" class="c-collection__item" data-uid="61efa49312a43">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa493129c6" class="c-typography c-typography__variant--p" data-uid="61efa493129c3">
    Collection modifier
</h4>                
                                    <!-- typography.blade.php  -->
<p id="61efa49312a06" class="c-typography c-typography__variant--p" data-uid="61efa49312a04">
    This utilizes the "sharpTop" and will therefore display differently.
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<a id="61efa49312ad0" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa49312acd">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312a8f" class="c-typography c-typography__variant--p" data-uid="61efa49312a8d">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa49312b53" class="c-collection__item" data-uid="61efa49312b51">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312b15" class="c-typography c-typography__variant--p" data-uid="61efa49312b12">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa49312bd6" class="c-collection__item" data-uid="61efa49312bd3">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312b97" class="c-typography c-typography__variant--p" data-uid="61efa49312b95">
    Unlinked item
</p>
        </div>
    
    
    </div>            
    </div>    </div>
    
    <div class="o-grid-4">
      <!-- collection.blade.php -->
<div id="61efa49312c21" class="c-collection c-collection--unbox" data-uid="61efa49312c1e">
    
             
            <!-- collection__item.blade.php -->
<div id="61efa49312ce2" class="c-collection__item" data-uid="61efa49312ce0">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<h4 id="61efa49312c63" class="c-typography c-typography__variant--p" data-uid="61efa49312c61">
    Collection modifier
</h4>                
                                    <!-- typography.blade.php  -->
<p id="61efa49312ca4" class="c-typography c-typography__variant--p" data-uid="61efa49312ca2">
    This utilizes the "unbox" and will therefore display differently.
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<a id="61efa49312d67" class="c-collection__item c-collection__item--action" href="https://helsingborg.se" data-uid="61efa49312d64">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312d27" class="c-typography c-typography__variant--p" data-uid="61efa49312d24">
    Linked item
</p>
        </div>
    
    
    </a>         
            <!-- collection__item.blade.php -->
<div id="61efa49312de9" class="c-collection__item" data-uid="61efa49312de7">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312dac" class="c-typography c-typography__variant--p" data-uid="61efa49312da9">
    Unlinked item
</p>
        </div>
    
    
    </div>         
            <!-- collection__item.blade.php -->
<div id="61efa49312e6d" class="c-collection__item" data-uid="61efa49312e6a">
    
    
            <div class="c-collection__content">
            <!-- typography.blade.php  -->
<p id="61efa49312e2f" class="c-typography c-typography__variant--p" data-uid="61efa49312e2c">
    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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Collection/collection.json