Vebego Component Library

Image And Text Block 

<!-- Image Left (Default) -->
<section class="org-image-and-text-block ">
    <div class="vebego-container">
        <div class="wrapper">
            <div class="first">
                <div class="mol-title ">
                    <span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

                <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>

                <a class="atm-button atm-button-primary button-md  ">
                    <span class="button-content">
                        <span>Button 1</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

                <a class="atm-button atm-button-secondary button-md ">
                    <span class="button-content">
                        <span>Button 2</span>
                        <span class="atm-icon  far fa-long-arrow-right   "></span>
                    </span>
                    <span class="button-underline"></span>
                </a>

                <a class="atm-button atm-button-secondary button-md ">
                    <span class="button-content">
                        <span>Button 3</span>
                        <span class="atm-icon  far fa-long-arrow-right   "></span>
                    </span>
                    <span class="button-underline"></span>
                </a>

            </div>
            <div class="second">
                <div class="media-image">
                    <picture class="atm-image ">
                        <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                        <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                        <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
                    </picture>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Image Right -->
<section class="org-image-and-text-block image-right">
    <div class="vebego-container">
        <div class="wrapper">
            <div class="first">
                <div class="mol-title ">
                    <span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

                <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>

                <a class="atm-button atm-button-primary button-md  ">
                    <span class="button-content">
                        <span>Button 1</span>

                    </span>
                    <span class="button-triangle"></span>
                </a>

                <a class="atm-button atm-button-secondary button-md ">
                    <span class="button-content">
                        <span>Button 2</span>
                        <span class="atm-icon  far fa-long-arrow-right   "></span>
                    </span>
                    <span class="button-underline"></span>
                </a>

                <a class="atm-button atm-button-secondary button-md ">
                    <span class="button-content">
                        <span>Button 3</span>
                        <span class="atm-icon  far fa-long-arrow-right   "></span>
                    </span>
                    <span class="button-underline"></span>
                </a>

            </div>
            <div class="second">
                <div class="media-image">
                    <picture class="atm-image ">
                        <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                        <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                        <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
                    </picture>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="org-image-and-text-block {{modifier}}">
  <div class="vebego-container">
    <div class="wrapper">
      <div class="first">
        {{render "@title" title merge=true}}
        {{render "@paragraph"}}
        {{#each buttonsPrimary}}
          {{render "@button-primary" this merge=true}}
        {{/each}}
        {{#each buttonsSecondary}}
          {{render "@button-secondary" this merge=true}}
        {{/each}}
      </div>
      <div class="second">
        <div class="media-image">
          {{render "@image"}}
        </div>
      </div>
    </div>
  </div>
</section>
 
/* Image Left (Default) */
{
  "title": {
    "underline": false
  },
  "buttonsPrimary": [
    {
      "text": "Button 1"
    }
  ],
  "buttonsSecondary": [
    {
      "text": "Button 2"
    },
    {
      "text": "Button 3"
    }
  ],
  "modifier": ""
}


/* Image Right */
{
  "title": {
    "underline": false
  },
  "buttonsPrimary": [
    {
      "text": "Button 1"
    }
  ],
  "buttonsSecondary": [
    {
      "text": "Button 2"
    },
    {
      "text": "Button 3"
    }
  ],
  "modifier": "image-right"
}
  • Content: 
    .org-image-and-text-block {
    .wrapper {
        @apply grid;
        @apply gap-8 lg:gap-32;

        @screen md {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .mol-title,
        .atm-paragraph {
            @apply mb-8;
        }
    }

    .first {
        @apply md:order-2;
    }

    .second {
        @apply md:order-1;
    }

    &.image-right {
        .first {
            @apply md:order-1;
        }

        .second {
            @apply md:order-2;
        }
    }

    .media-image {
        @apply relative py-6 pl-12;
        @apply md:py-8 md:pl-16;
        @apply lg:py-12 lg:pl-24;

        &::before {
            content: '';
            width: calc(100% - 6rem);
            height: 100%;
            @apply absolute left-0 top-0;
            @apply bg-primary-100;
            clip-path: polygon(0 0, 85% 0, 67% 100%, 0% 100%);
        }

        .atm-image {
            @apply relative;
            @apply z-10;
        }
    }
}
  • URL: /components/raw/image-and-text-block/image-and-text-block.css
  • Filesystem Path: src\components\04-organisms\image-and-text-block\image-and-text-block.css
  • Size: 1.1 KB

No notes defined.