<header class="topic-header topic-header-bg-image-igel">
    <div class="topic-header__body">
        <h3 class="topic-header__type">
            Schwerpunktthema <span class="topic-header__tag">Microservices</span>
        </h3>
        <div>
            <h2 class="topic-header__title topic-header-bg-image-text-box-igel">
                Downloadbereich
            </h2>
        </div>
        <div class="topic-header__text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin. Frankfurter
            fatback turkey pork chop prosciutto pork ground round tongue chuck doner.
            Pig venison pork chop shoulder corned beef capicola meatball.
        </div>
        <img src="../../assets/icons/arrow-long-down.svg" />
    </div>
</header>
<section class="page-layout-md--default">
    <div class="download-section-feature">
        <img class="download-section-feature__image" itemprop="photo" src="../../assets/example-content/beispiel-talk.jpg" alt="Eine Vortragsfolie" />
        <h3 class="download-section-feature__title">Titel des Talks</h3>
        <p class="download-section-feature__caption">
            Dies ist eine lustige Beschreibung des Talks
        </p>
        <a href="#" class="btn btn--small btn--cta download-section-feature__link" data-label="Download">Download</a>
    </div>
</section>
<section class="stripe stripe--primary">
    <div class="page-layout-md--default">
        <h2 class="teaser-section-heading">Ressourcen und Links</h2>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </div>
</section>
<section class="page-layout-xl--default">
    <h2 class="teaser-section-heading">INNOQ Primer</h2>
    <ul class="resource-list">
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">
                        Lustiger Titel, der etwas länger ist
                    </h3>
                    <p class="resource-list-item__caption">
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                        ist
                    </p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a><a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">
                        Lustiger Titel, der etwas länger ist
                    </h3>
                    <p class="resource-list-item__caption">
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                        ist Eine Beschreibung des Primers, der sehr interessant und
                        unterhaltsam ist
                    </p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a><a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">
                        Lustiger Titel, der etwas länger ist
                    </h3>
                    <p class="resource-list-item__caption">
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                        ist
                    </p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a><a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">
                        Lustiger Titel, der etwas länger ist
                    </h3>
                    <p class="resource-list-item__caption">
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                        ist
                    </p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a><a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src="../../assets/example-content/blockchain-primer.jpg" alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">
                        Lustiger Titel, der etwas länger ist
                    </h3>
                    <p class="resource-list-item__caption">
                        Eine Beschreibung des Primers, der sehr interessant und unterhaltsam
                        ist
                    </p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a><a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
    </ul>
</section>
<div class="newsletter-optin">
    <div class="page-layout-md--default">
        <div class="newsletter-optin__title">Unsere Newsletter</div>
        <div class="newsletter-optin__subtitle">
            Nie mehr spannende Artikel, Veranstaltungstipps und Podcasts zu
            Architektur, Entwicklung und Technologietrends verpassen!
        </div>
        <remote-form>
            <form class="newsletter-optin__form" action="#" method="post">
                <div class="form-group">
                    <check-to-toggle class="custom-form-control checkbox" target="#newsletter-checkbox-innoq"><input id="custom-checkbox-1" type="checkbox" class="form-control__input  check-to-toggle__checkbox" /><label for="custom-checkbox-1" class="form-label"><span class="form-label--emphasized">Der INNOQ Newsletter</span><br />Spannende Artikel, Veranstaltungstipps und Podcasts zu
                            Architektur, Entwicklung und Technologietrends. Erscheint 1 mal
                            pro Monat.<span id="newsletter-checkbox-innoq" class="hidden"><br /><br />Hiermit willige ich in die Erhebung und
                                Verarbeitung der vorstehenden Daten für den Empfang des
                                monatlichen Newsletters der innoQ Schweiz GmbH per E-Mail ein.
                                Die
                                <a href="https://www.innoq.com/datenschutz/#innoqnewsletter" class="link-teaser inverted-interaction-color">Datenschutzhinweise</a>
                                nach EU DSGVO habe ich zur Kenntnis genommen und bestätige dies
                                mit Absendung des Formulars.</span></label></check-to-toggle>
                </div>
                <div class="form-group">
                    <check-to-toggle class="custom-form-control checkbox" target="#newsletter-checkbox-rauchzeichen"><input id="custom-checkbox-2" type="checkbox" class="form-control__input check-to-toggle__checkbox" /><label for="custom-checkbox-2" class="form-label"><span class="form-label--emphasized">Das Digitale Rauchzeichen</span><br />Success Stories aus Digitalisierung und Modernisierung von
                            INNOQ Schweiz. Erscheint max. 4 mal pro Jahr.<span id="newsletter-checkbox-rauchzeichen" class="hidden"><br /><br />Hiermit willige ich in die Erhebung und
                                Verarbeitung der vorstehenden Daten für den Empfang des
                                Newsletters der innoQ Schweiz GmbH per E-Mail ein. Die
                                <a href="https://www.innoq.com/datenschutz/#newsletter:dasdigitalerauchzeichen" class="link-teaser inverted-interaction-color">Datenschutzhinweise</a>
                                nach EU DSGVO habe ich zur Kenntnis genommen und bestätige dies
                                mit Absendung des Formulars.</span></label></check-to-toggle>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="newsletter_email">Email</label><input type="email" name="newsletter_email" class="form-control" id="newsletter_email" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="newsletter_firstname"><span class=" form-label--emphasized">Vorname</span>
                        <small>optional</small></label><input type="text" id="newsletter_firstname" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="newsletter_lastname"><span class=" form-label--emphasized">Nachname</span>
                        <small>optional</small></label><input type="text" id="newsletter_lastname" class="form-control" />
                </div>
                <button class="btn btn--cta btn--small" data-label="Anmelden">
                    Anmelden
                </button>
            </form>
        </remote-form>
    </div>
</div>
<header class="topic-header topic-header-bg-image-igel">
    <div class="topic-header__body">
        <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
        <div>
            <h2 class="topic-header__title topic-header-bg-image-text-box-igel">Downloadbereich</h2>
        </div>
        <div class="topic-header__text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin.
            Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
            chuck doner. Pig venison pork chop shoulder corned beef capicola
            meatball.
        </div>
        <img src={context.app.uri('assets/icons/arrow-long-down.svg')} />
    </div>
</header>

<section class="page-layout-md--default">
    <div class="download-section-feature">
        <img class="download-section-feature__image" itemprop="photo" src={context.app.uri("assets/example-content/beispiel-talk.jpg")} alt="Eine Vortragsfolie" />
        <h3 class="download-section-feature__title">Titel des Talks</h3>
        <p class="download-section-feature__caption">Dies ist eine lustige Beschreibung des Talks</p>
        <a href="#" class="btn btn--small btn--cta download-section-feature__link" data-label="Download">Download</a>
    </div>
</section>

<section class="stripe stripe--primary">
    <div class="page-layout-md--default">
        <h2 class="teaser-section-heading">Ressourcen und Links</h2>
        <ul>
            <li>
                <a href="#">Link 1</a>
            </li>
            <li>
                <a href="#">Link 2</a>
            </li>
            <li>
                <a href="#">Link 3</a>
            </li>
            <li>
                <a href="#">Link 4</a>
            </li>
        </ul>
    </div>
</section>

<section class="page-layout-xl--default">
    <h2 class="teaser-section-heading">INNOQ Primer</h2>
    <ul class="resource-list">
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                    <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist</p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a>
                    <a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                    <p class="resource-list-item__caption"> Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist</p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a>
                    <a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                    <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist</p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a>
                    <a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                    <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist</p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a>
                    <a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
        <li class="resource-list-item">
            <img class="resource-list-item__image" itemprop="photo" src={context.app.uri("assets/example-content/blockchain-primer.jpg")} alt="Eine Vortragsfolie" />
            <div class=" resource-list-item-wrapper">
                <div class="resource-list-item__body">
                    <h3 class="resource-list-item__title">Lustiger Titel, der etwas länger ist</h3>
                    <p class="resource-list-item__caption">Eine Beschreibung des Primers, der sehr interessant und unterhaltsam ist</p>
                </div>
                <div class="resource-list-item__footer">
                    <a href="#" class="link-teaser">Download PDF</a>
                    <a href="#" class="link-teaser">Download ebook</a>
                </div>
            </div>
        </li>
    </ul>
</section>

<div class="newsletter-optin">
    <div class="page-layout-md--default">
        <div class="newsletter-optin__title">Unsere Newsletter</div>
        <div class="newsletter-optin__subtitle">Nie mehr spannende Artikel, Veranstaltungstipps und Podcasts zu Architektur, Entwicklung und Technologietrends verpassen!</div>
        <remote-form>
            <form class="newsletter-optin__form" action="#" method="post">
                <div class="form-group">
                    <check-to-toggle class="custom-form-control checkbox" target="#newsletter-checkbox-innoq">
                        <input id="custom-checkbox-1" type="checkbox" class="form-control__input  check-to-toggle__checkbox" />
                        <label for="custom-checkbox-1" class="form-label">
                            <span class="form-label--emphasized">Der INNOQ Newsletter</span><br/>Spannende Artikel, Veranstaltungstipps und Podcasts zu Architektur, Entwicklung und Technologietrends. Erscheint 1 mal pro Monat.
                            <span id="newsletter-checkbox-innoq" class="hidden">
                                <br/><br/>Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten für den Empfang des monatlichen Newsletters
                                der innoQ Schweiz GmbH per E-Mail ein. Die <a href="https://www.innoq.com/datenschutz/#innoqnewsletter" class="link-teaser inverted-interaction-color">Datenschutzhinweise</a> nach EU DSGVO habe ich zur Kenntnis genommen und bestätige dies mit Absendung des Formulars.
                            </span>
                        </label>
                    </check-to-toggle>
                </div>
                <div class="form-group">
                    <check-to-toggle class="custom-form-control checkbox" target="#newsletter-checkbox-rauchzeichen">
                        <input id="custom-checkbox-2" type="checkbox" class="form-control__input check-to-toggle__checkbox" />
                        <label for="custom-checkbox-2" class="form-label">
                            <span class="form-label--emphasized">Das Digitale Rauchzeichen</span><br/>Success Stories aus Digitalisierung und Modernisierung von INNOQ Schweiz. Erscheint max. 4 mal pro Jahr.
                            <span id="newsletter-checkbox-rauchzeichen" class="hidden">
                                <br/><br/>Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten für den Empfang des Newsletters
                                der innoQ Schweiz GmbH per E-Mail ein. Die <a href="https://www.innoq.com/datenschutz/#newsletter:dasdigitalerauchzeichen" class="link-teaser inverted-interaction-color">Datenschutzhinweise</a> nach EU DSGVO habe ich zur Kenntnis genommen und bestätige dies mit Absendung des Formulars.
                            </span>
                        </label>
                    </check-to-toggle>
                </div>
                <div class="form-group">
                    <label class="form-label form-label--emphasized" for="newsletter_email">Email</label>
                    <input type="email" name="newsletter_email" class="form-control" id="newsletter_email" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="newsletter_firstname">
                        <span class=" form-label--emphasized">Vorname</span> <small>optional</small>
                    </label>
                    <input type="text" id="newsletter_firstname" class="form-control" />
                </div>
                <div class="form-group">
                    <label class="form-label" for="newsletter_lastname">
                        <span class=" form-label--emphasized">Nachname</span> <small>optional</small>
                    </label>
                    <input type="text" id="newsletter_lastname" class="form-control" />
                </div>
                <button class="btn btn--cta btn--small" data-label="Anmelden">Anmelden</button>
            </form>
        </remote-form>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    .download-section-feature__image {
      margin-bottom: $spacer-md;
      width: 100%;
    }
    
    .download-section-feature__title {
      margin-bottom: $spacer-sm;
    }
    
    .download-section-feature__caption {
      margin-bottom: $spacer-sm;
    }
    
    .resource-list {
      @extend %list-unstyled;
    
      display: flex;
      flex-direction: column;
    }
    
    .resource-list-item {
      display: flex;
      flex-direction: column;
      margin-bottom: $spacer-lg;
      width: 100%;
    }
    
    .resource-list-item-wrapper {;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: $brand-secondary;
      padding: $spacer-md $spacer-sm;
      height: 100%;
      color: $brand-text-light;
    }
    
    .resource-list-item__body {
      padding-top: $spacer-xxl;
    }
    
    .resource-list-item__image {
      z-index: 2;
      margin: 0 auto $spacer-sm;
      margin-bottom: -$spacer-xxl;
      width: 50%;
    }
    
    .resource-list-item__title {
      margin-bottom: $spacer-xs;
      color: $brand-text-light;
    }
    
    .resource-list-item__caption {
      @extend %heading-font-regular;
    
      margin-bottom: $spacer-md;
    }
    
    .resource-list-item__footer {
      display: flex;
      justify-content: space-between;
    
      .link-teaser {
        color: $brand-text-light;
      }
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md)  {
      .resource-list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
      }
    
      .resource-list-item {
        flex-grow: 1;
        margin-right: $spacer-xs;
        margin-left: $spacer-xs;
        min-width: ms(32);
        max-width: 30%;
      }
    }
    
  • URL: /components/raw/topic-page/_topic-page.scss
  • Filesystem Path: components/04-pages/topic-page/_topic-page.scss
  • Size: 1.5 KB

There are no notes for this item.