Stage: Image

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div id="stage-12218-64453" class="stage">
    <div class="stage__inner">
        <div class="stage__content">
            <div class="stage__headline">

                <h1 class="headline"><span class="headline__text">Build<br />
                        <em class="headline__highlight">Awesome</em><br />
                        Audio Tools</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>With our <em class="headline__highlight">SDK’S</em></span></h1>
            </div>

            <div class="stage__text">
                We are a leading provider of state-of-the-art audio processing and music analysis technology.
            </div>

        </div>

        <div class="stage__media">
            <img src="https://bildermangel.de/600x600/fe7c09/130f26.webp" width="600" height="600" class="stage__image">
        </div>
    </div>

</div>


        {% set level = level ?? 1 %}
{% set id = id ??? html_id('stage') %}
{% set images = images|default([]) %}

<div {{ html_attributes({
  id,
  class: 'stage',
}, attrs ?? {}) }}>
  <div class="stage__inner">
    <div class="stage__content">
      {% if headline|default %}
        <div class="stage__headline">
          {% include '@headline' with headline | merge({
            size: false,
            level: level,
          }) only %}
        </div>
      {% endif %}

      {% if text|default %}
        <div class="stage__text">
          {{ text | componentize(inline_only=true) }}
        </div>
      {% endif %}

      {% if pills|default %}
        <div class="stage__pills">
          {% include '@pills' with { pills } only %}
        </div>
      {% endif %}

      {% if button|default %}
        <div class="stage__button">
          {% include '@button' with button | merge({
            showInternal: true,
            iconPosition: 'before',
          }) only %}
        </div>
      {% endif %}
    </div>

    {% if images or icon|default %}
      <div class="stage__media">
        {% if images|length == 1 %}
          <img {{ html_attributes(images[0], {
            class: 'stage__image',
          }) }}>
        {% elseif porthole|default %}
          <div class="stage__porthole">
            {% include '@porthole' with {
              images: images,
            } only %}
          </div>
        {% elseif icon|default %}
          <div class="stage__icon">
            <img {{ html_attributes({
              class: 'stage__icon-inner',
              width: 50,
              height: 50,
              role: 'presentation',
              alt: '',
              src: icon,
            }) }}>
          </div>
        {% elseif images|length > 1 %}
          <div class="stage__images">
            {% for image in images %}
              <img {{ html_attributes(images[0], {
                class: 'stage__image',
              }) }}>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>

  {% if selector|default %}
    <div class="stage__selector">
      {% include '@selector' with {
        id: 'selector' | namespaceInputId(id),
        ...selector,
      } only %}
    </div>
  {% endif %}
</div>


        
            
            {
  "headline": {
    "text": "Build\n__Awesome__\nAudio Tools",
    "subhead": "With our __SDK’S__"
  },
  "text": "We are a leading provider of state-of-the-art audio processing and music analysis technology.",
  "images": [
    {
      "src": "https://bildermangel.de/600x600/fe7c09/130f26.webp",
      "width": 600,
      "height": 600
    }
  ]
}

File:

Content:


                                @use 'grid';
@use 'sizing';

.stage {
  container-name: stage;
  container-type: inline-size;
}

.stage__inner {
  align-items: center;
  column-gap: var(--grid-gap);
  display: grid;
  row-gap: 4rem;

  @include sizing.mq($from: m) {
    grid-template-columns: auto #{grid.column(8)};
  }

  @include sizing.mq($from: l) {
    grid-template-columns: auto #{grid.column(8)};
  }

  @include sizing.mq($from: xl) {
    grid-template-columns: #{grid.column(16)} #{grid.column(14)};
  }
}

.stage__content {
  --stage-inset-step: 0;
  --stage-headline-1st-inset: calc(var(--stage-inset-step) * 4);
  --stage-headline-2nd-inset: 0;
  --stage-headline-3rd-inset: calc(var(--stage-inset-step) * 2);
  --stage-headline-4th-inset: calc(var(--stage-inset-step) * 0.5);
  --headline-subhead-inset: calc(var(--stage-inset-step) * 3);
  --headline-content-inset: var(--headline-subhead-inset);
  --headline-kicker-inset: var(--headline-subhead-inset);
  --headline-line-height: var(--line-height-narrow);
  --headline-font-size: var(--font-size-headline-1);
  --headline-line-block-size: calc(var(--headline-line-height) * var(--headline-font-size));
  --headline-line-count: 1;
  --headline-kicker-font-size: var(--font-size-enlarged);

  block-size: min-content;
  text-align: center;

  @include sizing.mq($from: m) {
    --stage-inset-step: 0.5rem;
    --headline-font-size: var(--font-size-headline-2);

    text-align: start;
  }

  @include sizing.mq($from: l) {
    --stage-inset-step: 1rem;
    --headline-font-size: var(--font-size-headline-1);
    --headline-subhead-inset: calc(var(--stage-inset-step) * 8);
  }
}

.stage__headline {
  &:has(.headline__text br:nth-of-type(1)) {
    --headline-line-count: 2;
  }

  &:has(.headline__text br:nth-of-type(2)) {
    --headline-line-count: 3;
  }

  &:has(.headline__text br:nth-of-type(3)) {
    --headline-line-count: 4;
  }

  @include sizing.mq($from: m) {
    .headline__text::before {
      block-size: calc(var(--headline-line-block-size) * var(--headline-line-count));
      content: '';
      display: contents;
      float: left;
      inline-size: 5rem;
      max-block-size: 100%;
      pointer-events: none;
      position: relative;
      shape-outside: polygon(0 0,
      var(--stage-headline-1st-inset) 0,
      var(--stage-headline-1st-inset) var(--headline-line-block-size),
      0 var(--headline-line-block-size),
      0 var(--headline-line-block-size),
      var(--stage-headline-2nd-inset) var(--headline-line-block-size),
      var(--stage-headline-2nd-inset) calc(var(--headline-line-block-size) * 2),
      0 calc(var(--headline-line-block-size) * 2),
      0 calc(var(--headline-line-block-size) * 2),
      var(--stage-headline-3rd-inset) calc(var(--headline-line-block-size) * 2),
      var(--stage-headline-3rd-inset) calc(var(--headline-line-block-size) * 3),
      0 calc(var(--headline-line-block-size) * 3),
      0 calc(var(--headline-line-block-size) * 3),
      var(--stage-headline-4th-inset) calc(var(--headline-line-block-size) * 3),
      var(--stage-headline-4th-inset) calc(var(--headline-line-block-size) * 4),
      0 calc(var(--headline-line-block-size) * 4));
    }
  }
}

.stage__text {
  font-size: var(--font-size-enlarged);
  line-height: var(--line-height-regular);
  margin-block-start: 1em;
  margin-inline: auto;
  max-inline-size: 50ch;
  padding-inline-start: var(--headline-content-inset);

  @include sizing.mq($from: m) {
    margin-inline: 0;
  }

  @include sizing.mq($from: l) {
    font-size: var(--font-size-medium);
  }
}

.stage__pills {
  margin-block-start: 1.6rem;
  padding-inline-start: var(--headline-content-inset);
}

.stage__button {
  margin-block-start: 2rem;
  padding-inline-start: var(--headline-content-inset);
}

.stage__media {
  order: -1;

  @include sizing.mq($from: s) {
    padding-inline: #{grid.offset(1)};
  }

  @include sizing.mq($from: m) {
    inline-size: auto;
    margin-inline: 0;
    order: 0;
    padding-inline: 0;
  }

  @include sizing.mq($from: xl) {
    padding-inline: #{grid.offset(1)};
  }
}

.stage__images {
  aspect-ratio: 1;
  block-size: min-content;
  display: grid;
  grid-template-columns: repeat(70, 1fr);
  grid-template-rows: repeat(71, 1fr);

  .stage__image:nth-child(1) {
    grid-column: 1/39;
    grid-row: 1/39;
  }

  .stage__image:nth-child(2) {
    grid-column: 43/71;
    grid-row: 5/33;
  }

  .stage__image:nth-child(3) {
    grid-column: 32/56;
    grid-row: 34/58;
  }

  .stage__image:nth-child(4) {
    grid-column: 9/29;
    grid-row: 43/63;
  }

  .stage__image:nth-child(5) {
    grid-column: 29/41;
    grid-row: 60/72;
  }
}

.stage__porthole {
  padding-inline: #{grid.offset(1)};

  @include sizing.mq($from: s) {
    padding-inline: 0;
  }

  @include sizing.mq($from: l) {
    padding-inline: #{grid.offset(1)};
  }
}

.stage__image {
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: var(--box-shadow-xxl);
  object-fit: cover;
}

.stage__icon {
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--color-steel-700);
  border-radius: 50%;
  box-shadow: var(--box-shadow-xxl);
  display: flex;
  inline-size: #{grid.column(4)};
  justify-content: center;
  margin-block-end: 1rem;
  margin-inline: auto;

  @include sizing.mq($from: m) {
    inline-size: #{grid.column(6)};
  }

  @include sizing.mq($from: xl) {
    inline-size: #{grid.column(8)};
  }
}

.stage__icon-inner {
  aspect-ratio: 1;
  inline-size: 50%;
}

.stage__selector {
  margin-block-start: 4rem;

  @include sizing.mq($from: m) {
    margin-block-start: 6rem;
  }
}

URL: /components/raw/stage/stage.scss
Filesystem Path: src/components/4-organisms/stage/stage.scss
Size: 5.5 KB

Handle: @stage--image
Variants (4): Default , Porthole , Icon , Image
Preview:
- With layout
- Component only
Filesystem Path: src/components/4-organisms/stage/stage.twig
References (5): @headline, @pills, @button, @porthole, @selector

No notes defined.