Vebego Component Library

Text Highlight 

<div class="mol-text-highlight">
    <div class="border"></div>
    <div class="atm-paragraph text-md">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
    </div>

</div>
 
<div class="mol-text-highlight">
  <div class="border"></div>
  {{render "@paragraph"}}
</div>
 
{
  "slash": {
    "flipped": true,
    "width": 2.75,
    "height": 150
  },
  "paragraph": {
    "isRichText": false,
    "text": "De werknemerservaring wordt een steeds belangrijker element van medewerkers, vooral met de komst van Generatie Z op de werkvloer. Zij verwachten dat een organisatie hun werkervaring “individualiseert” door ze te begrijpen, zodat ze hun rol en hun carrière tot hun eigen unieke persoonlijk ontwikkelingsplan kunnen kneden."
  }
}
  • Content: 
    .mol-text-highlight {
    @apply flex;
    @apply text-primary;

    .border {
        @apply hidden;
    }

    @screen md {
        .border {
            @apply block;
            @apply mr-12;
            @apply border-l;
            @apply border-primary;
            @apply border-solid;
            transform: rotate(-18deg);
        }
    }

    .atm-paragraph {
        @apply text-primary;
        @apply ml-0 md:ml-10 md:mr-0;
    }
}
  • URL: /components/raw/text-highlight/text-highlight.css
  • Filesystem Path: src\components\03-molecules\text-highlight\text-highlight.css
  • Size: 469 Bytes

No notes defined.