UHasselt Component Library

Date Block: Horizontal 

<div class="date-block date-block-horizontal">
    <div>10 nov</div>
</div>
 
<div class="date-block {{#if modifier}}date-block-{{modifier}}{{/if}}">
    <div>{{date}}</div>
</div>
 
{
  "date": "10 nov",
  "modifier": "horizontal"
}
  • Content: 
    .date-block {
    @apply relative w-16 h-16 inline-block bg-black text-white text-center text-md font-semibold uppercase;
    min-width: 64px;

    div {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        word-spacing: 9999px;
        left: 0;
    }

    @apply lg:w-24 lg:h-24 lg:text-lg;

    @screen lg {
        min-width: 96px;
    }

    &.date-block-horizontal {
        padding: 0.8rem;
        width: auto;
        height: auto;

        div {
            margin: auto;
            position: relative;
            top: auto;
            left: auto;
            -ms-transform: none;
            transform: none;
            word-spacing: normal;
        }
    }
}
  • URL: /components/raw/date-block/date-block.css
  • Filesystem Path: src\components\02-atoms\date-block\date-block.css
  • Size: 808 Bytes

No notes defined.