Ribbon

Play around with props, edit and copy code.

Parent div must be set to position: relative;

Branding

How to create and implement a new branding

• Internal use (Trinidad)

  // Less mixins
  .ribbon-corner-branding-example {
    .ribbon-corner-branding(linear-gradient({background}, {color of text});
  }
  
  // Example of branding for Bingo
  .ribbon-corner-branding-bingo {
    .ribbon-corner-branding(linear-gradient(115deg, #685232 47.49%, #C8AE86 72.29%, #F1D4AA 78.95%, #C8AE86 84.71%, #685232 97.43%), @white);
  }
  
  // Example of branding for Triss
  .ribbon-corner-branding-triss {
    .ribbon-corner-branding(@black, @yellow);
  }
  
  <RibbonCorner branding="bingo" size={700}>
    <span>Jackpot</span>
    <span>256 371 kr</span>
  </RibbonCorner>
  
  

• External use

  // Less
  .ribbon-corner-branding-bingo {
      .ribbon-corner-content {
        background: linear-gradient(115deg, #685232 47.49%, #C8AE86 72.29%, #F1D4AA 78.95%, #C8AE86 84.71%, #685232 97.43%);
        color: var(--white);
    }
    .ribbon-corner-content-holder:nth-child(1),
    .ribbon-corner-content-holder:nth-child(3) {
      color: transparent;
    }
  }
  
  // React example for Bingo
  <RibbonCorner branding="bingo" size={700}>
    <span>Jackpot</span>
    <span>256 371 kr</span>
  </RibbonCorner>
  
  

Properties

RibbonCorner

RibbonBanner

Accessibility