Vebego Component Library

Paragraph 

<!-- Medium (Default) -->
<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>


<!-- Small -->
<div class="atm-paragraph text-sm">
        <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>


<!-- Large -->
<div class="atm-paragraph text-lg">
        <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>


{{#if text}}
{{#if isRichText}}
    <div class="atm-paragraph {{modifier}}">{{{text}}}</div>
{{else}}
    <div class="atm-paragraph {{modifier}}"><p>{{text}}</p></div>
{{/if}}
{{/if}}
 
/* Medium (Default) */
{
  "isRichText": true,
  "text": "<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>",
  "modifier": "text-md"
}


/* Small */
{
  "isRichText": true,
  "text": "<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>",
  "modifier": "text-sm"
}


/* Large */
{
  "isRichText": true,
  "text": "<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>",
  "modifier": "text-lg"
}
  • Content: 
    .atm-paragraph {
    a {
        @apply text-cta;
        @apply underline;
    }

    p {
        @apply mb-4;
    }

    ul,
    ol {
        @apply mb-4;
        padding-left: 18px;
    }

    ul {
        @apply list-disc;
    }

    ol {
        @apply list-decimal;
    }
}
  • URL: /components/raw/paragraph/paragraph.css
  • Filesystem Path: src\components\02-atoms\paragraph\paragraph.css
  • Size: 304 Bytes

No notes defined.