PSI Software SE Design Library

Glass Teaser

No notes defined.

<!-- Default -->
<div class="glassTeaser">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Alternation -->
<div class="glassTeaser is-alternation">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Large -->
<div class="glassTeaser is-large">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Large Alternation -->
<div class="glassTeaser is-alternation is-large">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Small -->
<div class="glassTeaser is-small">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Small Alternation -->
<div class="glassTeaser is-alternation is-small">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Small Square -->
<div class="glassTeaser is-small is-square">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Small Square Alternation -->
<div class="glassTeaser is-alternation is-small is-square">

    <div class="glassTeaser-image">
        <figure class="figure" style="">

            <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

        </figure>

    </div>

    <div class="glassTeaser-content">

        <h3 class="glassTeaser-heading">
            <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
            <span class="glassTeaser-title">Ich bin der Titel</span>
        </h3>

        <div class="glassTeaser-description">
            Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
        </div>

        <div class="glassTeaser-cta">
            <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
                <span class="button-label">Mehr erfahren!</span></a>

        </div>

    </div>

</div>


<!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Medium (Default)</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <div class="glassTeaser">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

    <div class="glassTeaser is-alternation">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Large</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-large</li>
            </ul>
        </div>

    </header>

    <div class="glassTeaser is-large">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

    <div class="glassTeaser is-alternation is-large">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Small</h2>

        <div class="doc-variant-configuration">
            <ul data-label="Modifier">
                <li>is-small</li>
            </ul>
        </div>

    </header>

    <div class="glassTeaser is-small">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

    <div class="glassTeaser is-alternation is-small">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

    <div class="glassTeaser is-small is-square">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

    <div class="glassTeaser is-alternation is-small is-square">

        <div class="glassTeaser-image">
            <figure class="figure" style="">

                <img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />

            </figure>

        </div>

        <div class="glassTeaser-content">

            <h3 class="glassTeaser-heading">
                <strong class="glassTeaser-kicker">Thema</strong><span class="is-visually-hidden">:</span>
                <span class="glassTeaser-title">Ich bin der Titel</span>
            </h3>

            <div class="glassTeaser-description">
                Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.
            </div>

            <div class="glassTeaser-cta">
                <a href="#" class="button is-icon-only"><svg class="icon is-arrow-right">
                        <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                    </svg>
                    <span class="button-label">Mehr erfahren!</span></a>

            </div>

        </div>

    </div>

</section>


<!-- Default -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Alternation -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Large -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Large Alternation -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Small -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Small Alternation -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Small Square -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Small Square Alternation -->
<div class="glassTeaser{{#if is-alternation}} is-alternation{{/if}}{{#modifier}} {{.}}{{/modifier}}">

        {{#image}}
    <div class="glassTeaser-image">
        {{render '@figure' (contextData '@glassteaser' this) merge=false}}
    </div>
        {{/image}}

    <div class="glassTeaser-content">

            {{#if title}}
        <h3 class="glassTeaser-heading">
            {{#kicker}}<strong class="glassTeaser-kicker">{{{.}}}</strong><span class="is-visually-hidden">:</span>{{/kicker}}
            {{#title}}<span class="glassTeaser-title">{{{.}}}</span>{{/title}}
        </h3>
            {{/if}}

            {{#description}}
        <div class="glassTeaser-description">
            {{{.}}}
        </div>
            {{/description}}

            {{#link}}
        <div class="glassTeaser-link">
            {{render '@link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/link}}

            {{#cta}}
        <div class="glassTeaser-cta">
            {{render '@button--link' (contextData '@glassteaser' this) merge=true}}
        </div>
            {{/cta}}

    </div>

</div>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant"{{#id}} id="{{.}}"{{/id}}>

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#samples}}
        {{render '@glassteaser' (contextData '@glassteaser' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}
 
/* Default */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  }
}


/* Alternation */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "is-alternation": true
}


/* Large */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "modifier": "is-large"
}


/* Large Alternation */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "modifier": "is-large",
  "is-alternation": true
}


/* Small */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "modifier": "is-small"
}


/* Small Alternation */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "modifier": "is-small",
  "is-alternation": true
}


/* Small Square */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "modifier": "is-small is-square"
}


/* Small Square Alternation */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "modifier": "is-small is-square",
  "is-alternation": true
}


/* Doc Only */
{
  "image": {
    "src": "/images/placeholder/dummy-image.jpg",
    "alt": "Beschreibung des Teaser Images"
  },
  "kicker": "Thema",
  "title": "Ich bin der Titel",
  "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
  "cta": {
    "is-icon-only": true,
    "label": "Mehr erfahren!",
    "url": "#",
    "icon": {
      "id": "arrow-right"
    }
  },
  "variants": [
    {
      "title": "Medium (Default)",
      "samples": [
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          }
        },
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "is-alternation": true
        }
      ]
    },
    {
      "title": "Large",
      "modifiers": "is-large",
      "samples": [
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "modifier": "is-large"
        },
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "modifier": "is-large",
          "is-alternation": true
        }
      ]
    },
    {
      "title": "Small",
      "modifiers": "is-small",
      "samples": [
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "modifier": "is-small"
        },
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "modifier": "is-small",
          "is-alternation": true
        },
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "modifier": "is-small is-square"
        },
        {
          "image": {
            "src": "/images/placeholder/dummy-image.jpg",
            "alt": "Beschreibung des Teaser Images"
          },
          "kicker": "Thema",
          "title": "Ich bin der Titel",
          "description": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic.",
          "cta": {
            "is-icon-only": true,
            "label": "Mehr erfahren!",
            "url": "#",
            "icon": {
              "id": "arrow-right"
            }
          },
          "modifier": "is-small is-square",
          "is-alternation": true
        }
      ]
    }
  ]
}
  • Content: 
    %glassTeaser {
    $debugging: false;

    $image_aspect-ratio: math.div(3, 2) !default;
    $image_aspect-ratio--small: math.div(4, 3) !default;

    @include stack-spacing(component);

    &-image {

        .figure {
            @include stack-spacing(0);

        }

        img {
            --ratio: #{$image_aspect-ratio} / 1;
        }

    }

    &-content {
        @include grid-gutter(default, padding);

        background-color: $_glass_background-color;
        backdrop-filter: $_glass_backdrop-filter;

        @include border-radius();

        > *:first-child {
            margin-top: -.2em;
        }

    }

    &-heading {
        @include stack-spacing(0);
    }

    &-kicker {
        @extend %teaserCard-kicker;

        display: block;
        @include text-size(large);
    }

    &-title {
        display: block;

        @include text-size(4x-large);
    }

    &-description {
        @include stack-spacing(small);

        > *:first-child {
            @include stack-spacing(0);
        }

    }

    &-cta {
        @include stack-spacing();

        .button {
            @include stack-spacing(0);
        }

    }

    @function get-grid-template-columns(
        $left: 6,
        $right: 5,
        $overlap: 1,
    ){
        $total: ($left + $right - $overlap);
        @return get-columns-width($left - $overlap, $total) get-columns-width($overlap, $total) get-columns-width($right - $overlap, $total);
    }

    @include only-on-desktop(){
        width: get-columns-width(10);

        display: grid;
        column-gap: var(--gg);

        grid-template-columns: get-grid-template-columns(5, 6, $overlap: 1);
        grid-template-rows: auto 1fr;

        &::after { // Spacer
            content: "";

            display: block;
            width: 100%;
            padding-bottom: calc(100% + var(--gg));

            grid-column: 2 / span 1;
            grid-row: 1 / span 1;

            @if variable-exists(debugging) and $debugging {
                background: rgba(greenyellow, .5);
            }

        }

        &-image {
            grid-column: 2 / span 2;
            grid-row: 1 / span 2;
        }

        &-content {
            grid-column: 1 / span 2;
            grid-row: 2 / span 1;
            align-self: start;

            @include grid-gutter(default, margin-inline, $factor: -1);

        }

        &.is-alternation {
            grid-template-columns: get-grid-template-columns(6, 5, $overlap: 1);
        }

        &.is-alternation &-image {
            grid-column: 1 / span 2;
        }

        &.is-alternation &-content {
            grid-column: 2 / span 2;
        }

    }

    @include not-on-desktop(){
        $columns: 8;
        $inset: calc(#{math.div(1, $columns)} * (100vw - 2 * var(--pp)));

        display: grid;
        grid-template-columns: repeat($columns, $inset);
        grid-template-rows: auto $inset auto;

        &-image,
        &-content {
            grid-column-end: span 7;
            grid-row-end: span 2;
        }

        &-image {
            grid-column-start: 1;
            grid-row-start: 1;
        }

        &-content {
            grid-column-start: 2;
            grid-row-start: 2;
        }

        &.is-alternation &-image {
            grid-column-start: 2;
        }

        &.is-alternation &-content {
            grid-column-start: 1;
        }

    }

    &--large {

        %glassTeaser {

            &-image {

                img {
                    --ratio: 1 / 1;
                }

            }

            @include only-on-desktop(){

                &-image {
                    grid-row: 2 / span 1;
                }

                &-title {
                    @include text-size(5x-large);
                }

                &-content {
                    grid-row: 1 / span 2;
                    @include text-size(large);
                }

            }

        }

    }

    &--small {

        %glassTeaser {

            &-content {
                @include text-size(small);
            }

            &-title {
                @include text-size(2x-large);
            }

            &-kicker {
                @include text-size(small);
            }

        }

        &.is-square {

            %glassTeaser-image {

                img {
                    --ratio: 1 / 1;
                }

            }

        }

        @include only-on-desktop(){
            width: get-columns-width(5);

            grid-template-columns: get-grid-template-columns(4, 4, $overlap: 3);
            grid-template-rows: auto auto auto;

            &::after { // Spacer
                display: block;
                width: 100%;
                padding-bottom: 100%;

                grid-column: 1 / span 1;
                grid-row: 2 / span 1;
            }

            %glassTeaser {

                &-image {

                    img {
                        --ratio: #{$image_aspect-ratio--small} / 1;
                    }

                }

                &-content {
                    grid-row: 2 / span 2;
                }

            }

            &.is-alternation {
                margin-left: 0;
            }

        }

        @include not-on-desktop(){

            %glassTeaser {

                &-image,
                &-content {
                    grid-column-end: span 6;
                }

            }

            &.is-square {

                %glassTeaser-image {
                    grid-column-end: span 5;
                }

                &.is-alternation {

                    %glassTeaser-image {
                        grid-column-start: 3;
                    }

                }

            }

        }

    }

}

.glassTeaser {
    @extend %glassTeaser;

    &-image {
        @extend %glassTeaser-image;
    }

    &-content {
        @extend %glassTeaser-content;
    }

    &-heading {
        @extend %glassTeaser-heading;
    }

    &-kicker {
        @extend %glassTeaser-kicker;
    }

    &-title {
        @extend %glassTeaser-title;
    }

    &-description {
        @extend %glassTeaser-description;
    }

    &-cta {
        @extend %glassTeaser-cta;
    }

    &.is-large {
        @extend %glassTeaser--large;
    }

    &.is-small {
        @extend %glassTeaser--small;
    }

}
  • URL: /components/raw/glassteaser/_glassTeaser.styles.scss
  • Filesystem Path: components/03-fragments/glassTeaser/_glassTeaser.styles.scss
  • Size: 6.3 KB