UHasselt Component Library

App Paragraph 

<div class='atm-paragraph '>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a pulvinar. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, <a href="/some/file" download="download">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
    </div>
 
{{#if isRichText}}
    <div class='atm-paragraph {{modifier}}'>{{{text}}}</div>
{{else}}
    <div class='atm-paragraph {{modifier}}'><p>{{{text}}}</p></div>
{{/if}}
 
{
  "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin mauris vel nisi condimentum accumsan. Phasellus eget est condimentum erat fringilla congue. <a href=\"/\">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat. Cras fringilla blandit purus nec <a href='javascript:(void);'>fermentum</a>. Vivamus tristique ac mi a pulvinar. Quisque non ipsum tortor. Nunc nec odio non tellus malesuada molestie id sed ipsum. Curabitur risus ex, <a href=\"/some/file\" download=\"download\">aliquet</a> sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>",
  "modifier": "",
  "isRichText": true
}
  • Content: 
    .atm-paragraph {
    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';
            }
        }
    }

    p {
        @apply mb-8;
    }

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

    ul,
    ol {
        @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;
            }
        }
    }
}

.atm-paragraph .custom-list-checkmarks li li {
    list-style-type: disc;
    padding-left: 1rem;

    &::before {
        content: none;
    }
}
  • URL: /components/raw/app-paragraph/app-paragraph.css
  • Filesystem Path: src\components\07-app-atoms\app-paragraph\app-paragraph.css
  • Size: 2.8 KB

No notes defined.