Product Microsite Page

Ready

HTML
View
Context
Assets
Info
Notes


        
        <main class="product-microsite-page" role="main">
    <header class="image-header bg-image-workshop-03">
        <div class="image-header__content">
            <h1 class="image-header__title">Ich bin eine Headline</h1>
            <h3>Ich bin eine Headline</h3>
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </header>

    <div class="stripe stripe--gray">
        <div class="container-xl container-vertical-spacing-xl">
            <h2 class="section-heading--secondary">Ich bin eine Headline</h2>

            <div class="tile-grid-md">
                <a href="#" class="card">
                    <div class="card__header">
                        <img class="card__header__image" src="../../assets/bg-images/general/visual-workshop-12.webp" />
                        <ul class="card__header__tags">
                            <li class="card__header__tag">Label</li>
                            <li class="card__header__tag">Label</li>
                        </ul>
                    </div>
                    <div class="card__content">
                        <div class="card__content__body">
                            <div class="card__content__body__subheadline">Ich bin eine Headline</div>
                            <h2 class="card__content__body__headline">Ich bin eine Headline</h2>
                            <p class="card__content__body__text">
                                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                            </p>
                        </div>
                        <div class="card__content__footer">
                            <div>
                                <h3 class="card__content__footer__heading">Ich bin eine Headline</h3>
                                <ul class="checklist">
                                    <li>Ich bin ein kleines Listitem</li>
                                    <li>Ich bin ein kleines Listitem</li>
                                </ul>
                            </div>
                            <div>
                                <h3 class="card__content__footer__heading">Ich bin eine Headline</h3>
                                <p class="standalone">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                            </div>
                            <span class="card__content__footer__link link-teaser inverted-text-color">Mehr erfahren</span>
                        </div>
                    </div>
                </a>

                <a href="#" class="card">
                    <div class="card__header">
                        <img class="card__header__image" src="../../assets/bg-images/general/visual-workshop-12.webp" />
                        <ul class="card__header__tags">
                            <li class="card__header__tag">Label</li>
                            <li class="card__header__tag">Label</li>
                        </ul>
                    </div>
                    <div class="card__content">
                        <div class="card__content__body">
                            <div class="card__content__body__subheadline">Ich bin eine Headline</div>
                            <h2 class="card__content__body__headline">Ich bin eine Headline</h2>
                            <p class="card__content__body__text">
                                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                            </p>
                        </div>
                        <div class="card__content__footer">
                            <div>
                                <h3 class="card__content__footer__heading">Ich bin eine Headline</h3>
                                <ul class="checklist">
                                    <li>Ich bin ein kleines Listitem</li>
                                    <li>Ich bin ein kleines Listitem</li>
                                </ul>
                            </div>
                            <div>
                                <h3 class="card__content__footer__heading">Ich bin eine Headline</h3>
                                <p class="standalone">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
                            </div>
                            <span class="card__content__footer__link link-teaser inverted-text-color">Mehr erfahren</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <h2 class="section-heading--secondary">Ich bin eine Headline</h2>

    <div class="triplet-divider">
        <div class="triplet-divider__left">
            Ich bin eine Headline
        </div>
        <div class="triplet-divider__right">
            DIch bin eine Headline
        </div>
        <div class="triplet-divider__center">
            <div class="page-layout-xl--default">
                <h2>Ich bin eine Headline</h2>
                <p class="lead">
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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>

    <section class="two-column-image-divider">
        <figure class="two-column-image-divider__left-image">
            <img src="../../assets/bg-images/general/visual-workshop-12.webp" />
        </figure>
        <figure class="two-column-image-divider__right-image">
            <img src="../../assets/bg-images/general/visual-workshop-16.webp" />
        </figure>
    </section>

    <article class="stripe stripe--gradient-2">
        <div class="container-md container-vertical-spacing-lg">
            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">Ich bin eine Headline</div>
                    <h2 class="product-list-teaser__headline">Ich bin eine Headline</h2>
                    <p class="product-list-teaser__text">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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 class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">1 Tag</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Management,
                                Product Owner, Digital Product Designer</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Eine
                                konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">Ich bin eine Headline</div>
                    <h2 class="product-list-teaser__headline">Ich bin eine Headline</h2>
                    <p class="product-list-teaser__text">
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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 class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">4 Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Design, Entwicklung, Product Owner, Management</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Ein nutzergetesteter Prototyp für Ihr digitales Produkt</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">Ich bin eine Headline</div>
                    <h2 class="product-list-teaser__headline">Ich bin eine Headline</h2>
                    <p class="product-list-teaser__text">
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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 class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">2
                                Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Product Owner, Design, Entwicklung</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Inhalt und Umfang ihres MVP, sowie messbare Erfolgskriterien</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">Ich bin eine Headline</div>
                    <h2 class="product-list-teaser__headline">Ich bin eine Headline</h2>
                    <p class="product-list-teaser__text">
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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 class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">2-5 Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Product Owner, Digital Product Designer</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Ein Basis-Backlog, der für Effektivitätssteigerung im Projekt sorgt</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">Ich bin eine Headline</div>
                    <h2 class="product-list-teaser__headline">Ich bin eine Headline</h2>
                    <p class="product-list-teaser__text">
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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 class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">2 Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Das ganze Team</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Teambuilding, ein Set an Entscheidungen zur Entwicklung, Regeln für die Zusammenarbeit</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>
        </div>
    </article>

    <div class="wall-note bg-image-workshop-06">
        <div class="wall-note__content">
            <h3 class="wall-note__subheading">Ich bin eine Headline</h3>
            <h2 class="wall-note__heading">Ich bin eine Headline</h2>
            <p class="wall-note__text">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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>
            <span class="icon icon--big icon-arrow-sync icon--brand-secondary"></span>
        </div>
    </div>
</main>


        <main class="product-microsite-page" role="main">
    <header class="image-header bg-image-workshop-03">
        <div class="image-header__content">
            <h1 class="image-header__title">{{headline}}</h1>
            <h3>{{headline}}</h3>
            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
        </div>
    </header>

    <div class="stripe stripe--gray">
        <div class="container-xl container-vertical-spacing-xl">
            <h2 class="section-heading--secondary">{{headline}}</h2>

            <div class="tile-grid-md">
                <a href="#" class="card">
                    <div class="card__header">
                        <img class="card__header__image" src="{{ path '/assets/bg-images/general/visual-workshop-12.webp'}}" />
                        <ul class="card__header__tags">
                            <li class="card__header__tag">Label</li>
                            <li class="card__header__tag">Label</li>
                        </ul>
                    </div>
                    <div class="card__content">
                        <div class="card__content__body">
                            <div class="card__content__body__subheadline">{{headline}}</div>
                            <h2 class="card__content__body__headline">{{headline}}</h2>
                            <p class="card__content__body__text">
                                {{text_short}}
                            </p>
                        </div>
                        <div class="card__content__footer">
                            <div>
                                <h3 class="card__content__footer__heading">{{headline}}</h3>
                                <ul class="checklist">
                                    <li>{{listitem}}</li>
                                    <li>{{listitem}}</li>
                                </ul>
                            </div>
                            <div>
                                <h3 class="card__content__footer__heading">{{headline}}</h3>
                                <p class="standalone">{{text_short}}</p>
                            </div>
                            <span class="card__content__footer__link link-teaser inverted-text-color">Mehr erfahren</span>
                        </div>
                    </div>
                </a>

                <a href="#" class="card">
                    <div class="card__header">
                        <img class="card__header__image" src="{{ path '/assets/bg-images/general/visual-workshop-12.webp'}}" />
                        <ul class="card__header__tags">
                            <li class="card__header__tag">Label</li>
                            <li class="card__header__tag">Label</li>
                        </ul>
                    </div>
                    <div class="card__content">
                        <div class="card__content__body">
                            <div class="card__content__body__subheadline">{{headline}}</div>
                            <h2 class="card__content__body__headline">{{headline}}</h2>
                            <p class="card__content__body__text">
                                {{text_short}}
                            </p>
                        </div>
                        <div class="card__content__footer">
                            <div>
                                <h3 class="card__content__footer__heading">{{headline}}</h3>
                                <ul class="checklist">
                                    <li>{{listitem}}</li>
                                    <li>{{listitem}}</li>
                                </ul>
                            </div>
                            <div>
                                <h3 class="card__content__footer__heading">{{headline}}</h3>
                                <p class="standalone">{{text_short}}</p>
                            </div>
                            <span class="card__content__footer__link link-teaser inverted-text-color">Mehr erfahren</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <h2 class="section-heading--secondary">{{headline}}</h2>

    <div class="triplet-divider">
        <div class="triplet-divider__left">
            {{headline}}
        </div>
        <div class="triplet-divider__right">
            D{{headline}}
        </div>
        <div class="triplet-divider__center">
            <div class="page-layout-xl--default">
                <h2>{{headline}}</h2>
                <p class="lead">
                    {{text}}
                </p>
            </div>
        </div>
    </div>

    <section class="two-column-image-divider">
        <figure class="two-column-image-divider__left-image">
            <img src="{{ path '/assets/bg-images/general/visual-workshop-12.webp'}}" />
        </figure>
        <figure class="two-column-image-divider__right-image">
            <img src="{{ path '/assets/bg-images/general/visual-workshop-16.webp'}}"/>
        </figure>
    </section>

    <article class="stripe stripe--gradient-2">
        <div class="container-md container-vertical-spacing-lg">
            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">{{headline}}</div>
                    <h2 class="product-list-teaser__headline">{{headline}}</h2>
                    <p class="product-list-teaser__text">{{text}}</p>
                </div>
                <div class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">1 Tag</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Management,
                                Product Owner, Digital Product Designer</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Eine
                                konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten</span>
                            </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">{{headline}}</div>
                    <h2 class="product-list-teaser__headline">{{headline}}</h2>
                    <p class="product-list-teaser__text">
                        {{text}}
                    </p>
                </div>
                <div class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">4 Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Design, Entwicklung, Product Owner, Management</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Ein nutzergetesteter Prototyp für Ihr digitales Produkt</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">{{headline}}</div>
                    <h2 class="product-list-teaser__headline">{{headline}}</h2>
                    <p class="product-list-teaser__text">
                        {{text}}
                    </p>
                </div>
                <div class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">2
                                Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Product Owner, Design, Entwicklung</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Inhalt und Umfang ihres MVP, sowie messbare Erfolgskriterien</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">{{headline}}</div>
                    <h2 class="product-list-teaser__headline">{{headline}}</h2>
                    <p class="product-list-teaser__text">
                        {{text}}
                    </p>
                </div>
                <div class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">2-5 Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Product Owner, Digital Product Designer</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Ein Basis-Backlog, der für Effektivitätssteigerung im Projekt sorgt</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>

            <div href="#" class="product-list-teaser">
                <div class="product-list-teaser__body">
                    <div class="product-list-teaser__caption">{{headline}}</div>
                    <h2 class="product-list-teaser__headline">{{headline}}</h2>
                    <p class="product-list-teaser__text">
                        {{text}}
                    </p>
                </div>
                <div class="product-list-teaser__footer">
                    <ul class="tuple-list">
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Dauer:</span>
                            <span class="tuple-list__value">2 Tage</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Teilnehmer:</span>
                            <span class="tuple-list__value">Das ganze Team</span>
                        </li>
                        <li class="tuple-list__entry">
                            <span class="tuple-list__label">Ergebnis:</span>
                            <span class="tuple-list__value">Teambuilding, ein Set an Entscheidungen zur Entwicklung, Regeln für die Zusammenarbeit</span>
                        </li>
                    </ul>
                </div>
                <a class="product-list-teaser__cta" href="#">Jetzt anfragen</a>
            </div>

            <div class="icon-divider">
                <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
            </div>
        </div>
    </article>

    <div class="wall-note bg-image-workshop-06">
        <div class="wall-note__content">
            <h3 class="wall-note__subheading">{{headline}}</h3>
            <h2 class="wall-note__heading">{{headline}}</h2>
            <p class="wall-note__text">{{text}}</p>
            <span class="icon icon--big icon-arrow-sync icon--brand-secondary"></span>
        </div>
    </div>
</main>


        
            
            {
  "text": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. 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.",
  "text_short": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
  "headline": "Ich bin eine Headline",
  "listitem": "Ich bin ein kleines Listitem"
}

File:

Content:


                                .product-microsite-page {
  .tile-grid-md {
    gap: $spacer-lg;
  }

  .section-heading--secondary {
    margin-top: $spacer-xl;
  }

  .triplet-divider {
    margin-top: $spacer-base;
  }
}

URL: /components/raw/product-microsite-page/_product-microsite-page.scss
Filesystem Path: components/01-pages/service-pages/product-microsite-page/_product-microsite-page.scss
Size: 192 Bytes

Handle: @product-microsite-page
Preview:
- With layout
- Component only
Filesystem Path: components/01-pages/service-pages/product-microsite-page/product-microsite-page.html

No notes defined.