UHasselt Component Library

Paragraph: Intro 

<div class='paragraph paragraph-intro'>
        <p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
    </div>
 
{{#if isRichText}}
    <div class='paragraph {{modifier}}'>{{{text}}}</div>
{{else}}
    <div class='paragraph {{modifier}}'><p>{{{text}}}</p></div>
{{/if}}
 
{
  "text": "<p>Lorem ipsum dolor sit amet, <a href=\"/\">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>",
  "modifier": "paragraph-intro",
  "isRichText": true
}
  • Content: 
    .paragraph {
    @apply flow-root;
}

.paragraph,
.table-wrapper {
    .afbeeldinglinks {
        @apply md:float-left md:mr-6 mb-6;
    }

    .afbeeldingrechts {
        @apply md:float-right md:ml-6 mb-6;
    }

    a {
        @apply text-red underline;

        &::after {
            font-family: 'Font Awesome 5 Pro';
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-weight: 900;
            margin-left: 0.25rem;
        }

        &::before {
            font-family: 'Font Awesome 5 Pro';
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            font-weight: 900;
            margin-right: 0.25rem;
        }

        &[target='_blank'],
        &[href^='http'] {
            &::after {
                content: '\f35d';
            }
        }

        &[href$='.pdf'] {
            &::before {
                content: '\f1c1';
            }
        }

        &.button {
            &::after {
                display: none;
            }
            &::before {
                display: none;
            }
        }
    }

    p {
        @apply mb-4;
    }

    hr {
        @apply border-b border-solid border-gray my-8 border-t-0;
    }

    &.paragraph-intro {
        @apply text-intro font-semibold;
    }

    ul,
    ol {
        display: inherit;
        @apply mb-8 ml-4 md:ml-0;

        > li {
            @apply relative pl-6;

            &::before {
                @apply absolute left-0;
            }

            > ul {
                @apply mb-0;
            }
        }
    }

    ul {
        &:not([class*='custom-list']) {
            li {
                &::before {
                    content: '\2022';
                    margin-top: -2px;
                }
            }
        }

        &.custom-list-arrows {
            li {
                &::before {
                    content: '\f0da';
                    @apply font-bold;
                    font-family: 'Font Awesome 5 Pro';
                }
            }
        }

        &.custom-list-checkmarks {
            li {
                @apply pl-10;
            }

            li {
                &::before {
                    content: '\f00c';
                    @apply text-green;
                    font-family: 'Font Awesome 5 Pro';
                    @apply text-lg;
                    line-height: 1.5rem;
                }
            }
        }
    }

    ol {
        counter-reset: section;

        li {
            &::before {
                counter-increment: section;
                content: counter(section) '.';
            }
        }
    }
}

.red ul {
    &.custom-list-checkmarks {
        li {
            &::before {
                @apply text-white;
            }
        }
    }
}

.paragraph .custom-list-checkmarks li li,
.table-wrapper .custom-list-checkmarks li li {
    @apply pl-6;

    &::before {
        content: '\2022';
        margin-top: -2px;
        @apply text-md text-black;
    }
}
  • URL: /components/raw/paragraph/paragraph.css
  • Filesystem Path: src\components\02-atoms\paragraph\paragraph.css
  • Size: 3.4 KB

No notes defined.