@zplane-web/craft-licensing

Section 

<div id="section-41168-74771" class="section">
    <div class="section__inner">
        <div class="section__head">
            <div class="section__headline">

                <h1 class="headline" data-headline-size="3"><span class="headline__text">Latest news from zplane</span></h1>
            </div>

            <div class="section__buttons">

                <a class="button button--secondary" href="#">
                    <span class="button__text u-underline">More news</span>
                    <span class="button__icon">
                        <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                        </svg> </span>
                </a>
            </div>
        </div>

        <div class="section__text">
            <div class="text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

            </div>
        </div>

        <div class="section__content">
            <div class="section__block">

                <div id="section-41168-74771-content" class="slider slider--3">
                    <div class="slider__offset slider__offset--start">
                        <div class="progressive-blur progressive-blur--inline-start">
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                        </div>
                    </div>

                    <div class="slider__items" id="section-41168-74771-content-items">
                        <div class="slider__item">

                            <div id="section-41168-74771-content-item-1" class="teaser has-underline">
                                <div class="teaser__inner">
                                    <div class="teaser__image">
                                        <picture class="image">
                                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                                        </picture>
                                    </div>

                                    <div class="teaser__content">
                                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                                        <a class="teaser__headline u-overlay-link" href="#">
                                            <span class="teaser__headline-text">
                                                <h2 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h2>
                                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                                </svg></span></a>

                                        <div class="teaser__description">
                                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">

                            <div id="section-41168-74771-content-item-2" class="teaser has-underline">
                                <div class="teaser__inner">
                                    <div class="teaser__image">
                                        <picture class="image">
                                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                                        </picture>
                                    </div>

                                    <div class="teaser__content">
                                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                                        <a class="teaser__headline u-overlay-link" href="#">
                                            <span class="teaser__headline-text">
                                                <h2 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h2>
                                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                                </svg></span></a>

                                        <div class="teaser__description">
                                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">

                            <div id="section-41168-74771-content-item-3" class="teaser has-underline">
                                <div class="teaser__inner">
                                    <div class="teaser__image">
                                        <picture class="image">
                                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                                        </picture>
                                    </div>

                                    <div class="teaser__content">
                                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                                        <a class="teaser__headline u-overlay-link" href="#">
                                            <span class="teaser__headline-text">
                                                <h2 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h2>
                                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                                </svg></span></a>

                                        <div class="teaser__description">
                                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">

                            <div id="section-41168-74771-content-item-4" class="teaser has-underline">
                                <div class="teaser__inner">
                                    <div class="teaser__image">
                                        <picture class="image">
                                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                                        </picture>
                                    </div>

                                    <div class="teaser__content">
                                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                                        <a class="teaser__headline u-overlay-link" href="#">
                                            <span class="teaser__headline-text">
                                                <h2 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h2>
                                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                                </svg></span></a>

                                        <div class="teaser__description">
                                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">

                            <div id="section-41168-74771-content-item-5" class="teaser has-underline">
                                <div class="teaser__inner">
                                    <div class="teaser__image">
                                        <picture class="image">
                                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                                        </picture>
                                    </div>

                                    <div class="teaser__content">
                                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                                        <a class="teaser__headline u-overlay-link" href="#">
                                            <span class="teaser__headline-text">
                                                <h2 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h2>
                                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                                </svg></span></a>

                                        <div class="teaser__description">
                                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="slider__offset slider__offset--end">
                        <div class="progressive-blur progressive-blur--inline-end">
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                            <div class="progressive-blur__step"></div>
                        </div>
                    </div>

                    <div class="slider__scrollbar">
                        <div id="section-41168-74771-content-scrollbar" class="scrollbar" data-scrollbar-sync="section-41168-74771-content-items" data-scrollbar-item-selector=".slider__item">
                            <div class="scrollbar__thumb"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section__text">
            <div class="text">
                <p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

            </div>
        </div>
    </div>
</div>
 
{% set level = level ??? 1 %}
{% set nextLevel = headline|default ? level + 1 : level %}
{% set id = id ??? html_id('section') %}

<div {{ html_attributes({
  id: id,
  class: 'section',
}, attrs ?? {}) }}>
  <div class="section__inner">
    {% if headline|default or buttons|default %}
      <div class="section__head">
        {% if headline|default %}
          <div class="section__headline">
            {% include '@headline' with headline | merge({
              level: level,
              size: 3,
            }) only %}
          </div>
        {% endif %}

        {% if buttons|default %}
          <div class="section__buttons">
            {% for button in buttons %}
              {% include '@button' with button | merge({
                size: 'small',
                showInternal: true,
                iconPosition: 'after',
                secondary: true,
              }) only %}
            {% endfor %}
          </div>
        {% endif %}
      </div>
    {% endif %}

    {% if introText|default %}
      <div class="section__text">
        {% include '@text' with { text: introText } only %}
      </div>
    {% endif %}

    {% headlines level: nextLevel %}
      {% if use.component|default or (use|default and use is iterable) or blocks|default is iterable %}
        <div class="section__content">
          {% if use.component|default %}
            <div class="section__block">
              {% include use.component with use.configuration | merge({
                id: 'content' | namespaceInputId(id),
                level: nextLevel,
              }) only %}
            </div>
          {% elseif use|default and use is iterable %}
            {% for item in use %}
              <div class="section__block">
                {% include item.component with item.configuration | merge({
                  id: 'content' | namespaceInputId(id),
                  level: nextLevel,
                }) only %}
              </div>
            {% endfor %}
          {% elseif blocks|default is iterable %}
            {% for block in blocks %}
              <div {{ html_attributes({
                id: block.id | default(loop.index) | namespaceInputId(id),
                class: 'section__block',
              }) }}>
                {{ block.content }}
              </div>
            {% endfor %}
          {% endif %}
        </div>
      {% endif %}
    {% endheadlines %}

    {% if outroText|default %}
      <div class="section__text">
        {% include '@text' with { text: outroText } only %}
      </div>
    {% endif %}
  </div>
</div>
 
{
  "headline": {
    "text": "Latest news from zplane"
  },
  "buttons": [
    {
      "text": "More news",
      "link": "#"
    }
  ],
  "introText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>\n",
  "use": {
    "component": "@slider",
    "configuration": {
      "columns": 3,
      "items": [
        {
          "component": "@teaser",
          "configuration": {
            "link": "#",
            "date": "2024-11-21T00:00:00.000Z",
            "image": {
              "src": "https://bildermangel.de/848x512/fe7c09/130f26.webp"
            },
            "headline": {
              "text": "An Interview with Jay-Z Producer and Music Teacher, Ski Beatz"
            },
            "description": "<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>\n"
          }
        },
        {
          "component": "@teaser",
          "configuration": {
            "link": "#",
            "date": "2024-11-21T00:00:00.000Z",
            "image": {
              "src": "https://bildermangel.de/848x512/fe7c09/130f26.webp"
            },
            "headline": {
              "text": "An Interview with Jay-Z Producer and Music Teacher, Ski Beatz"
            },
            "description": "<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>\n"
          }
        },
        {
          "component": "@teaser",
          "configuration": {
            "link": "#",
            "date": "2024-11-21T00:00:00.000Z",
            "image": {
              "src": "https://bildermangel.de/848x512/fe7c09/130f26.webp"
            },
            "headline": {
              "text": "An Interview with Jay-Z Producer and Music Teacher, Ski Beatz"
            },
            "description": "<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>\n"
          }
        },
        {
          "component": "@teaser",
          "configuration": {
            "link": "#",
            "date": "2024-11-21T00:00:00.000Z",
            "image": {
              "src": "https://bildermangel.de/848x512/fe7c09/130f26.webp"
            },
            "headline": {
              "text": "An Interview with Jay-Z Producer and Music Teacher, Ski Beatz"
            },
            "description": "<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>\n"
          }
        },
        {
          "component": "@teaser",
          "configuration": {
            "link": "#",
            "date": "2024-11-21T00:00:00.000Z",
            "image": {
              "src": "https://bildermangel.de/848x512/fe7c09/130f26.webp"
            },
            "headline": {
              "text": "An Interview with Jay-Z Producer and Music Teacher, Ski Beatz"
            },
            "description": "<p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>\n"
          }
        }
      ]
    }
  },
  "outroText": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>\n"
}
  • Content: 
    .section {
  container-name: section;
  container-type: inline-size;
}

.section__inner {
  display: grid;
  grid-template-columns: 100%;
  inline-size: 100%;
  padding-block: clamp(var(--_section-padding-inline), 6cqi, 4rem);
  row-gap: 1.6rem;
}

.section__head {
  align-items: center;
  column-gap: var(--grid-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  row-gap: 1.6rem;
  text-align: center;
}

.section__headline {
  align-self: start;
  flex-shrink: 0;
  inline-size: max-content;
}

.section__content {
  margin-block: 1.6rem;
}

.section__text {
  --text-max-inline-size: 80ch;
}

.section__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
  • URL: /components/raw/section/section.scss
  • Filesystem Path: src/components/4-organisms/section/section.scss
  • Size: 689 Bytes

No notes defined.