Components

Icons

Angle arrow down

<span class="occlss-icon occlss-icon--angle-arrow-down " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#angle-arrow-down" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Angle arrow left

<span class="occlss-icon occlss-icon--angle-arrow-left " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#angle-arrow-left" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Angle arrow right

<span class="occlss-icon occlss-icon--angle-arrow-right " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#angle-arrow-right" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Angle arrow up

<span class="occlss-icon occlss-icon--angle-arrow-up " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#angle-arrow-up" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow both

<span class="occlss-icon occlss-icon--arrow-both " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-both" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow down bold

<span class="occlss-icon occlss-icon--arrow-down-bold " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-down-bold" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right down long

<span class="occlss-icon occlss-icon--arrow-right-down-long " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-down-long" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right left long

<span class="occlss-icon occlss-icon--arrow-right-left-long " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-left-long" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right long down secondary

<span class="occlss-icon occlss-icon--arrow-right-long-down-secondary " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-down-secondary" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right long left secondary

<span class="occlss-icon occlss-icon--arrow-right-long-left-secondary " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-left-secondary" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right long right secondary

<span class="occlss-icon occlss-icon--arrow-right-long-right-secondary " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right long up secondary

<span class="occlss-icon occlss-icon--arrow-right-long-up-secondary " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-up-secondary" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right right long

<span class="occlss-icon occlss-icon--arrow-right-right-long " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-right-long" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Arrow right up long

<span class="occlss-icon occlss-icon--arrow-right-up-long " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-up-long" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Check

<span class="occlss-icon occlss-icon--check " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#check" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Circle

<span class="occlss-icon occlss-icon--circle " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#circle" class="icon__source icon__source--svg "></use>
  </svg>
</span>

ex

<span class="occlss-icon occlss-icon--ex " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#ex" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Exclamation mark

<span class="occlss-icon occlss-icon--exclamation-mark " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#exclamation-mark" class="icon__source icon__source--svg "></use>
  </svg>
</span>

File

<span class="occlss-icon occlss-icon--file " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#file" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Info

<span class="occlss-icon occlss-icon--info " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#info" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Invisible

<span class="occlss-icon occlss-icon--invisible " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#invisible" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Newsletter

<span class="occlss-icon occlss-icon--newsletter " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#newsletter" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Pin

<span class="occlss-icon occlss-icon--pin " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#pin" class="icon__source icon__source--svg "></use>
  </svg>
</span>
<span class="occlss-icon occlss-icon--search " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#search" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Visible

<span class="occlss-icon occlss-icon--visible " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#visible" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Warning badge

<span class="occlss-icon occlss-icon--warning-badge " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#warning-badge" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Warning sign

<span class="occlss-icon occlss-icon--warning-sign " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#warning-sign" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Twitter

<span class="occlss-icon occlss-icon--twitter " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#twitter" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Linkedin

<span class="occlss-icon occlss-icon--linkedin " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#linkedin" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Instagram

<span class="occlss-icon occlss-icon--instagram " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#instagram" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Facebook

<span class="occlss-icon occlss-icon--facebook " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#facebook" class="icon__source icon__source--svg "></use>
  </svg>
</span>

RSS

<span class="occlss-icon occlss-icon--rss " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#rss" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Youtube

<span class="occlss-icon occlss-icon--youtube " aria-hidden="true">
  <svg aria-hidden="true" class="occlss-icon__container  ">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#youtube" class="icon__source icon__source--svg "></use>
  </svg>
</span>

Changelog

2.4.5

  • Youtube icon added

1.0.0

  • Component Added