UHasselt Component Library

Article Card 

<article class='article-card'>
    <div class='article-card-wrap-image'>
        <picture class="picture ">
            <img class="picture-image " src="https://picsum.photos/id/239/480/320" alt="Test" loading="lazy">
        </picture>

    </div>

    <div class='article-card-content'>
        <div class='article-card-tags'>
            <div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
                    This is a tag

                </span>
            </div>
            <div class='article-card-tag'><span class="tag tag-red-outline tag-sm">
                    This is a tag

                </span>
            </div>
            <p class='article-card-content-date'>8 April</p>
        </div>
        <h3 class="heading ">
            The quick brown fox jumps over the lazy dog
        </h3>
        <div class='paragraph '>
            <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>

        <a href="#" class="link " aria-label="" title="This is what a link looks like">

            <span class="text">This is what a link looks like</span>

        </a>

    </div>
</article>
 
<article class='article-card'>
    <div class='article-card-wrap-image'>
        {{render '@image' image}}
    </div>

    <div class='article-card-content'>
        <div class='article-card-tags'>
            {{#each tagsList}}
                <div class='article-card-tag'>{{render
                        '@tag--tag-red-outline-sm'
                    }}</div>
            {{/each}}
            <p class='article-card-content-date'>8 April</p>
        </div>
        {{render '@heading--h3'}}
        {{render '@paragraph'}}
        {{render '@link'}}
    </div>
</article>
 
{
  "image": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/480/320"
  },
  "tagsList": [
    {
      "text": "A tag for UHasselt"
    },
    {
      "text": "Another tag for UHasselt"
    }
  ]
}
  • Content: 
    .article-card {
    @apply border border-solid border-gray;

    .article-card-wrap-image {
        width: 100%;
        height: 207px;

        .picture {
            width: 100%;
            height: 100%;

            .picture-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .article-card-content {
        padding: 24px;

        .article-card-tags {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .article-card-tag {
                margin-right: 12px;
                margin-bottom: 8px;
            }

            .article-card-content-date {
                @apply text-black-400;
            }
        }
    }
}
  • URL: /components/raw/article-card/article-card.css
  • Filesystem Path: src\components\04-organisms\article-card\article-card.css
  • Size: 836 Bytes

No notes defined.