Vebego Component Library

Content Header 

<section class="org-content-header">
    <div class="vebego-container">
        <div class="content-header-text">
            <div class="mol-card-extended  js--clickable">
                <div>
                    <span class="atm-heading h-subtitle">FM Trends</span>

                    <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                    <div class="atm-paragraph text-md">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                    </div>

                    <div class="reading-time">
                        <span class="atm-icon  far fa-eye  fa-sm "></span>
                        <span class="text">8 minuten</span>
                    </div>
                </div>
                <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
            </div>
        </div>
        <div class="content-header-image">
            <picture class="atm-image ">
                <source srcset="https://picsum.photos/id/250/1170/380" media="(min-width: 768px)">
                <img class="" src="https://picsum.photos/id/250/768/700" alt="" loading="lazy">
            </picture>
        </div>
    </div>
</section>
 
<section class="org-content-header">
    <div class="vebego-container">
        <div class="content-header-text">
            {{ render '@card-extended' card merge=true}}
        </div>
        <div class="content-header-image">
            {{ render '@image' image merge=true}}
        </div>        
    </div>
</section>
 
{
  "card": {
    "image": false
  },
  "image": {
    "src": "https://picsum.photos/id/250/768/700",
    "sources": [
      {
        "mediaQuery": "(min-width: 768px)",
        "src": "https://picsum.photos/id/250/1170/380"
      }
    ]
  }
}
  • Content: 
    .org-content-header {
    .vebego-container {
        @apply grid;
        @apply grid-cols-1;
        grid-template-rows: 0.5fr 1fr auto;

        .content-header-text {
            @apply bg-white;
            @apply relative;
            @apply p-4 md:p-8;
            @apply mx-2 md:mx-8 mt-8;
            grid-area: 2 / 1 / 4 / 2;
        }

        .content-header-image {
            grid-area: 1 / 1 / 3 / 2;
            @apply w-auto;
            @apply h-full;

            img {
                @apply w-full;
                @apply h-full;
                object-fit: cover;
            }
        }

        @screen lg {
            display: grid;
            grid-auto-columns: 1fr;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: min-content;
            gap: 0px 0px;

            .content-header-text {
                grid-area: 1 / 1 / 2 / 2;
                align-self: end;
                @apply mb-[-1px];
            }

            .content-header-image {
                grid-area: 1 / 1 / 2 / 3;
            }
        }

        @screen xl {
            grid-template-columns: 1fr 2fr;
        }
    }
}
  • URL: /components/raw/content-header/content-header.css
  • Filesystem Path: src\components\04-organisms\content-header\content-header.css
  • Size: 1.2 KB

No notes defined.