HAS Green Academy styleguide

Image And Text

1179 × 333 
<section>
    <div class="c-image-text  t-bg--gray-light  ">
        <div class="c-image-text__img">
            <picture>
                <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/600x400 600w, https://via.placeholder.com/300x200 300w, " data-src="https://via.placeholder.com/300x200" alt="" sizes="auto" width="300" height="200">
            </picture>

        </div>

        <div class="c-image-text__text">

            <div class="o-layer  o-layer--large">
                <div class="o-retain">
                    <div class="o-flow">
                        <h2>Wie is Has?</h2>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla odio velit, eu auctor sem dictum vel. Donec porttitor velit in pulvinar malesuada. Sed mattis interdum enim, vel cursus quam.</p>

                        <p>
                            <a class="c-button      c-button--has-icon          ">
                                <span class="c-button__inner">
                                    <span class="c-button__label  " data-module-bind="btn-label">
                                        Kom sfeer proeven
                                    </span>

                                    <span class="c-button__wrap-icon">
                                        <svg class="c-icon    " aria-hidden="true">
                                            <use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
                                        </svg>

                                    </span>

                                </span>
                            </a>
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
 
<section>
  <div class="c-image-text  t-bg--gray-light  {{# if isReversed }}c-image-text--reversed{{/if}}">
    <div class="c-image-text__img">
      {{ render '@atoms-image' }}
    </div>

    <div class="c-image-text__text">

      <div class="o-layer  o-layer--large">
        <div class="o-retain">
          <div class="o-flow">
            <h2>{{ heading }}</h2>

            {{{ content }}}

            <p>
              {{> '@atoms-button' label='Kom sfeer proeven' icon='arrow-right' element='a' }}
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
 
{
  "heading": "Wie is Has?",
  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla odio velit, eu auctor sem dictum vel. Donec porttitor velit in pulvinar malesuada. Sed mattis interdum enim, vel cursus quam.</p>",
  "isReversed": false
}
  • Content: 
    /*  =========================================================================
    Components.Image-and-text
    ========================================================================= */

@use 'node_modules/@supple-kit/supple-css/tools/responsive';

/*  Block
    ========================================================================= */

.c-image-text {
  --img-columns: 1 / 8;
  --text-columns: 9 / -2;
}



/*  Modifier
    ========================================================================= */

.c-image-text--reversed {
  // --c-image-text-img-columns
  --img-columns: 8 / -1;
  --text-columns: 2 / 7;
}


/*  Responsive
    ========================================================================= */

@include responsive.mq(lap) {
  .c-image-text {
    display: grid;
    grid-template-columns: 1fr repeat(12, minmax(0, 60px)) 1fr;

    > * {
      grid-row: 1 / -1;
    }
  }

  .c-image-text__img {
    grid-column: var(--img-columns);

    img {
      block-size: 100%;
      object-fit: cover;
    }
  }

  .c-image-text__text {
    grid-column: var(--text-columns);
    align-self: center;
  }
}

@include responsive.mq(desk) {
  .c-image-text {
    grid-template-columns: 1fr repeat(12, minmax(0, 82px)) 1fr;
  }
}

@include responsive.mq(desk-large) {
  .c-image-text {
    grid-template-columns: 1fr repeat(12, minmax(0, 93px)) 1fr;
  }

  .c-image-text__img {
    max-block-size: 450px;
  }
}
  • URL: /components/raw/organisms-image-and-text/_image-and-text.scss
  • Filesystem Path: src/components/organisms/image-and-text/_image-and-text.scss
  • Size: 1.4 KB

No notes defined.