UHasselt Component Library

App procedure card 

<div class='mol-procedure-card'>
    <div class='title'>
        <div class='count'>1</div>
        <h3 class="atm-heading ">The quick brown fox jumps over the lazy dog</h3>
    </div>
    <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>

</div>
 
<div class='mol-procedure-card'>
    <div class='title'>
        <div class='count'>{{stap}}</div>
        {{render '@app-heading--h3' heading merge=true}}
    </div>
    {{render '@app-paragraph' paragraph merge=true}}
</div>
 
{
  "stap": "1"
}
  • Content: 
    .mol-procedure-card {
    @apply p-8;

    .title {
        @apply flex flex-row flex-nowrap gap-4;

        .count {
            @apply text-h3-mobile md:text-h3 font-semibold -mt-1;
        }
    }

    .atm-paragraph {
        @apply ml-7;

        p {
            @apply mb-0;
        }
    }
}
  • URL: /components/raw/app-procedure-card/app-procedure-card.css
  • Filesystem Path: src\components\08-app-molecules\app-procedure-card\app-procedure-card.css
  • Size: 318 Bytes

No notes defined.