Link to Fluid's Microsoft Teams channel Link to the support page

Stamp

Stamp is a special brand identity component for Act with ENGIE operation

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Example

Please notice there are two ids in the svg :

  • nj-stamp__gradient
  • nj-stamp__overlay

If you need multiple Stamp on the same html page, please change these ids as you can see on this page.

#Act With ENGIE 
<svg xmlns="http://www.w3.org/2000/svg" class="nj-stamp">
  <defs>
     <linearGradient id="nj-stamp__gradient" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0%" stop-color="#0af"/>
      <stop offset="100%" stop-color="#23d2b5"/>
    </linearGradient>
    <mask id="nj-stamp__mask" x="0" y="0" width="100%" height="100%">
      <circle class="nj-stamp__overlay" cx="85" cy="85" r="85"/>
      <text class="nj-stamp__text" y="67" transform="translate(85)">
        <tspan x="0" text-anchor="middle">#Act</tspan>
        <tspan x="0" text-anchor="middle" dy="28">With</tspan>
        <tspan x="0" text-anchor="middle" dy="28">ENGIE</tspan>
      </text>
    </mask>
  </defs>
  <circle cx="85" cy="85" r="85" fill="url(#nj-stamp__gradient)" mask="url(#nj-stamp__mask)"/>
</svg>

Usage

#Act With ENGIE 
<div><!-- This div is used only for the background example -->
  <svg xmlns="http://www.w3.org/2000/svg" class="nj-stamp">
    <defs>
       <linearGradient id="nj-stamp__gradient01" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stop-color="#0af"/>
        <stop offset="100%" stop-color="#23d2b5"/>
      </linearGradient>
      <mask id="nj-stamp__mask01" x="0" y="0" width="100%" height="100%">
        <circle class="nj-stamp__overlay" cx="85" cy="85" r="85"/>
        <text class="nj-stamp__text" y="67" transform="translate(85)">
          <tspan x="0" text-anchor="middle">#Act</tspan>
          <tspan x="0" text-anchor="middle" dy="28">With</tspan>
          <tspan x="0" text-anchor="middle" dy="28">ENGIE</tspan>
        </text>
      </mask>
    </defs>
    <circle cx="85" cy="85" r="85" fill="url(#nj-stamp__gradient01)" mask="url(#nj-stamp__mask01)"/>
  </svg>
</div>

If for legal reasons it is necessary to translate the #ActWithENGIE, use the version with the asterisk that will refer to the translation as a legal notice.

#Act With ENGIE* 
<svg xmlns="http://www.w3.org/2000/svg" class="nj-stamp">
  <defs>
      <linearGradient id="nj-stamp__gradient02" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0%" stop-color="#0af"/>
      <stop offset="100%" stop-color="#23d2b5"/>
    </linearGradient>
    <mask id="nj-stamp__mask02" x="0" y="0" width="100%" height="100%">
      <circle class="nj-stamp__overlay" cx="85" cy="85" r="85"/>
      <text class="nj-stamp__text" y="67" transform="translate(85)">
        <tspan x="0" text-anchor="middle">#Act</tspan>
        <tspan x="0" text-anchor="middle" dy="28">With</tspan>
        <tspan x="0" text-anchor="middle" dy="28">ENGIE*</tspan>
      </text>
    </mask>
  </defs>
  <circle cx="85" cy="85" r="85" fill="url(#nj-stamp__gradient02)" mask="url(#nj-stamp__mask02)"/>
</svg>

White variation

#Act With ENGIE 
<div>
  <svg xmlns="http://www.w3.org/2000/svg" class="nj-stamp">
    <defs>
      <mask id="nj-stamp__mask03" x="0" y="0" width="100%" height="100%">
        <circle class="nj-stamp__overlay" cx="85" cy="85" r="85"/>
        <text class="nj-stamp__text" y="67" transform="translate(85)">
          <tspan x="0" text-anchor="middle">#Act</tspan>
          <tspan x="0" text-anchor="middle" dy="28">With</tspan>
          <tspan x="0" text-anchor="middle" dy="28">ENGIE</tspan>
        </text>
      </mask>
    </defs>
    <circle cx="85" cy="85" r="85" fill="#fff" mask="url(#nj-stamp__mask03)"/>
  </svg>
</div>

Shadow

You can add the class .nj-stamp--shadow to have a shadow on the stamp.

#Act With ENGIE 
<div>
  <svg xmlns="http://www.w3.org/2000/svg" class="nj-stamp nj-stamp--shadow">
    <defs>
       <linearGradient id="nj-stamp__gradient04" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stop-color="#0af"/>
        <stop offset="100%" stop-color="#23d2b5"/>
      </linearGradient>
      <mask id="nj-stamp__mask04" x="0" y="0" width="100%" height="100%">
        <circle class="nj-stamp__overlay" cx="85" cy="85" r="85"/>
        <text class="nj-stamp__text" y="67" transform="translate(85)">
          <tspan x="0" text-anchor="middle">#Act</tspan>
          <tspan x="0" text-anchor="middle" dy="28">With</tspan>
          <tspan x="0" text-anchor="middle" dy="28">ENGIE</tspan>
        </text>
      </mask>
    </defs>
    <circle cx="85" cy="85" r="85" fill="url(#nj-stamp__gradient04)" mask="url(#nj-stamp__mask04)"/>
  </svg>
</div>

Download

If you need the svg as a file, you can download the different versions here.

Spinner

Status-indicator