UHasselt Component Library

Content Block 

<!-- Content Block White Left -->
<section class='content-block block-left'>
    <div class='uhasselt-container'>
        <div class='left'>
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
            </picture>

        </div>

        <div class='right'>
            <div class='wrapper'>
                <div class='head-white'>
                    <h2 class="heading ">
                        The quick brown fox jumps over the lazy dog
                    </h2>
                </div>

                <div class='paragraph paragraph-white'>
                    <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<i class="far fa-external-link"></i></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 <i>pulvinar</i>. 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>
    </div>
</section>


<!-- Content Block White Right -->
<section class='content-block block-right'>
    <div class='uhasselt-container'>
        <div class='left'>
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
            </picture>

        </div>

        <div class='right'>
            <div class='wrapper'>
                <div class='head-white'>
                    <h2 class="heading ">
                        The quick brown fox jumps over the lazy dog
                    </h2>
                </div>

                <div class='paragraph paragraph-white'>
                    <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<i class="far fa-external-link"></i></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 <i>pulvinar</i>. 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>
    </div>
</section>


<!-- Content Block White Full -->
<section class='content-block block-full'>
    <div class='uhasselt-container'>
        <div class='full'>
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
            </picture>

        </div>

        <div class='right'>
            <div class='wrapper'>
                <div class='head-white'>
                    <h2 class="heading ">
                        The quick brown fox jumps over the lazy dog
                    </h2>
                </div>

                <div class='paragraph paragraph-white'>
                    <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<i class="far fa-external-link"></i></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 <i>pulvinar</i>. 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>
    </div>
</section>


<!-- Content Block Red Left -->
<section class='content-block block-left'>
    <div class='uhasselt-container'>
        <div class='left'>
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
            </picture>

        </div>

        <div class='right'>
            <div class='wrapper'>
                <div class='head-red'>
                    <h2 class="heading ">
                        The quick brown fox jumps over the lazy dog
                    </h2>
                </div>

                <div class='paragraph paragraph-red'>
                    <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<i class="far fa-external-link"></i></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 <i>pulvinar</i>. 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>
    </div>
</section>


<!-- Content Block Red Right -->
<section class='content-block block-right'>
    <div class='uhasselt-container'>
        <div class='left'>
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
            </picture>

        </div>

        <div class='right'>
            <div class='wrapper'>
                <div class='head-red'>
                    <h2 class="heading ">
                        The quick brown fox jumps over the lazy dog
                    </h2>
                </div>

                <div class='paragraph paragraph-red'>
                    <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<i class="far fa-external-link"></i></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 <i>pulvinar</i>. 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>
    </div>
</section>


<!-- Content Block Red Full -->
<section class='content-block block-full'>
    <div class='uhasselt-container'>
        <div class='full'>
            <picture class="picture ">
                <img class="picture-image " src="https://picsum.photos/id/239/1500/1500" alt="Test" loading="lazy">
            </picture>

        </div>

        <div class='right'>
            <div class='wrapper'>
                <div class='head-red'>
                    <h2 class="heading ">
                        The quick brown fox jumps over the lazy dog
                    </h2>
                </div>

                <div class='paragraph paragraph-red'>
                    <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<i class="far fa-external-link"></i></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 <i>pulvinar</i>. 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>
    </div>
</section>


<section class='content-block {{modifier}}'>
    <div class='uhasselt-container'>
        {{#if isFull}}
            <div class='full'>
                {{render '@image' imgfull}}
            </div>
        {{else}}
            <div class='left'>
                {{render '@image' imgside}}
            </div>
        {{/if}}

        <div class='right'>
            <div class='wrapper'>
                {{#if bg-color}}
                    <div class='head-red'>
                        {{render '@heading--h2'}}
                    </div>
                {{else}}
                    <div class='head-white'>
                        {{render '@heading--h2'}}
                    </div>
                {{/if}}

                {{#if bg-color}}
                    {{render '@paragraph' paragraph}}
                {{else}}
                    {{render '@paragraph' paragraph}}
                {{/if}}
            </div>
        </div>
    </div>
</section>
 
/* Content Block White Left */
{
  "modifier": "block-left",
  "bg-color": "",
  "isFull": false,
  "imgside": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "imgfull": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "paragraph": {
    "text": "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<i class=\"far fa-external-link\"></i></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 <i>pulvinar</i>. 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.",
    "modifier": "paragraph-white"
  }
}


/* Content Block White Right */
{
  "modifier": "block-right",
  "bg-color": "",
  "isFull": false,
  "imgside": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "imgfull": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "paragraph": {
    "text": "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<i class=\"far fa-external-link\"></i></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 <i>pulvinar</i>. 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.",
    "modifier": "paragraph-white"
  }
}


/* Content Block White Full */
{
  "modifier": "block-full",
  "bg-color": "",
  "isFull": true,
  "imgside": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "imgfull": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "paragraph": {
    "text": "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<i class=\"far fa-external-link\"></i></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 <i>pulvinar</i>. 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.",
    "modifier": "paragraph-white"
  }
}


/* Content Block Red Left */
{
  "modifier": "block-left",
  "bg-color": true,
  "isFull": false,
  "imgside": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "imgfull": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "paragraph": {
    "text": "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<i class=\"far fa-external-link\"></i></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 <i>pulvinar</i>. 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.",
    "modifier": "paragraph-red"
  }
}


/* Content Block Red Right */
{
  "modifier": "block-right",
  "bg-color": true,
  "isFull": false,
  "imgside": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "imgfull": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "paragraph": {
    "text": "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<i class=\"far fa-external-link\"></i></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 <i>pulvinar</i>. 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.",
    "modifier": "paragraph-red"
  }
}


/* Content Block Red Full */
{
  "modifier": "block-full",
  "bg-color": true,
  "isFull": true,
  "imgside": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "imgfull": {
    "modifier": "",
    "imageModifier": "",
    "lazy": true,
    "alt": "Test",
    "src": "https://picsum.photos/id/239/1500/1500"
  },
  "paragraph": {
    "text": "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<i class=\"far fa-external-link\"></i></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 <i>pulvinar</i>. 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.",
    "modifier": "paragraph-red"
  }
}
  • Content: 
    .content-block {
    @apply mb-16;

    .uhasselt-container {
        @apply flex;
        @apply justify-center;
    }

    .heading {
        @apply m-0;
        @apply pl-8 pt-8 md:pt-0 md:pb-8 pr-8;
    }

    &.block-full {
        .uhasselt-container {
            @apply flex-col;
        }

        .picture {
            max-height: 450px;

            img {
                @apply w-full;
                max-height: 450px;
                object-fit: cover;
            }
        }

        .right {
            @apply md:-mt-24;
            @apply md:mr-24;
            @apply md:ml-24;

            .wrapper {
                @apply shadow-2xl;

                .heading {
                    @apply pt-8 pb-0;
                }

                .head-red {
                    @apply bg-red;
                    @apply text-white;

                    .heading.text-red {
                        @apply text-white;
                    }
                }

                .head-white {
                    @apply bg-white;
                }

                .usp-list {
                    @apply shadow-none;
                }

                .paragraph-red {
                    @apply bg-red;
                    @apply text-white;
                    @apply p-8 pt-4;

                    a {
                        @apply text-white;
                    }
                }

                .paragraph-white {
                    @apply bg-white;
                    @apply p-8 pt-4;
                }
            }
        }
    }

    &.block-right,
    &.block-left {
        .uhasselt-container {
            @apply flex-col md:flex-row;
        }

        .picture {
            max-height: 410px;
            max-width: 768px;
            @apply relative;
            @apply z-10;

            img {
                @apply w-full;
                max-height: 410px;
                object-fit: cover;
            }
        }

        .left {
            @apply relative;
            @apply z-10;

            @screen md {
                &::after {
                    @apply block absolute;
                    @apply -bottom-14 left-1/4;
                    z-index: 0;
                    content: url(/assets/img/down-arrow-small.svg);
                    width: 18px;
                    height: 126px;
                }
            }
        }

        .right {
            @apply md:mt-8 lg:mt-24;
            @apply md:w-4/5 lg:w-1/2;
            @apply z-10;

            .usp-list {
                @apply md:-ml-64;
            }

            .head-red {
                @apply bg-red md:bg-transparent;
                @apply text-white md:text-black;
            }

            .head-white {
                @apply bg-white md:bg-transparent;
            }

            .paragraph-red {
                @apply bg-red;
                @apply text-white;
                @apply p-8;
                @apply md:-ml-64;
                @apply shadow-xl;

                a {
                    @apply text-white underline;
                }
            }

            .paragraph-white {
                @apply bg-white;
                @apply md:-ml-64;
                @apply p-8;
                @apply shadow-xl;
            }
        }
    }

    &.block-right {
        .uhasselt-container {
            @apply md:flex-row-reverse;
        }

        .right .paragraph-white,
        .right .paragraph-red {
            @apply md:-mr-64;
            @apply md:ml-0;
        }

        .left {
            @screen md {
                &::after {
                    @apply left-auto;
                    @apply right-1/4;
                }
            }
        }
    }
}
  • URL: /components/raw/content-block/content-block.css
  • Filesystem Path: src\components\04-organisms\content-block\content-block.css
  • Size: 3.9 KB

No notes defined.