# Trainings Overview Page

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <main role="main">
        <header class="standard-header" style="background-image: url(../../assets/bg-images/general/visual-trainings-01.webp); background-color: var(--overlay-standard-color);">
            <h1 class="standard-header__title">Unser Schulungsangebot</h1>
            <h2 class="standard-header__subtitle">Weil wir Wissen gerne mit Ihnen teilen</h2>
            <div class="standard-header__intro">
                <div class="standard-header__intro__text">
                    Sich auf das Wissen von Beratern und externen Dienstleistern zu verlassen ist das Eine, das Wissen im
                    eigenen Haus zu vertiefen, um die Leistung Dritter beurteilen zu können das Andere. INNOQ unterstützt
                    Sie natürlich auch beim „Anderen“,
                    sodass Sie nicht immer auf unsere Projektbegleitung angewiesen sind.
                </div>
            </div>
        </header>

        <article class="page-layout-md--default">
            <p>Wir bieten Schulungen zu bewährten und aktuellen Themen an. Dabei achten wir immer darauf, dass die
                Inhalte einen hohen Praxisbezug haben und wenden einprägsame Methoden an.</p>
            <p>Darüber hinaus können Ihre Mitarbeiter bei uns Ausbildungen zum iSAQB Certified Professional for Software
                Architecture (CPSA) – Foundation Level besuchen und sich anschließend zertifizieren lassen.</p>
        </article>
        <article class="stripe stripe--gray">
            <section class="page-layout-md--default">
                <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
                <a class=" list-teaser-training primary">
                    <div class="list-teaser__body">
                        <h2 class="list-teaser-training__headline">Titel</h2>
                        <div class="list-teaser-training__caption">Untertitel</div>
                        <div class="label-big badge badge--inverted">Labeltext</div>
                    </div>
                    <div class="list-teaser__footer">
                        <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
                    </div>
                </a>

                <a class="list-teaser-training secondary">
                    <div class="list-teaser__body">
                        <h2 class="list-teaser-training__headline">Titel</h2>
                        <div class="list-teaser-training__caption">Untertitel</div>
                        <div class="label-big badge">Labeltext</div>
                    </div>
                    <div class="list-teaser__footer">
                        <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
                    </div>
                </a>
                <div class="tile-grid-sm">
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                    <div class="label-big badge">
                                        Interaktiv!
                                    </div>
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                </div>
            </section>
        </article>
        <article class="page-layout-md--default">
            <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
            <div class="tile-grid-sm">
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
            </div>
        </article>
        <div class="default-full-width-teaser bg-image-trainings-03">
            <div class="default-full-width-teaser__wrapper">
                <div class="default-full-width-teaser__body">
                    <div>
                        <div class="default-full-width-teaser__caption">Individuelle Schulungen</div>
                        <div>
                            <div class="default-full-width-teaser__header">
                                <h2>Auf Ihr Bedürfnis angepasst</h2>
                            </div>
                            <div class="default-full-width-teaser">
                                Ich erhalte Informationen dazu, das ich die Schulungsinhalte individualisieren kann, den
                                Umfang
                                individualisieren kann, etc. Ich erhalte Informationen dazu, das ich die
                                Schulungsinhalte individualisieren
                                kann, den Umfang individualisieren kann, etc. Ich erhalte Informationen dazu, das ich
                                die Schulungsinhalte
                                individualisieren kann, den Umfang individualisieren kann, etc.
                            </div>
                            <div class="default-full-width-teaser__footer">
                                <a href="#" class="btn btn--small btn--cta" data-label="Schulung anfragen">Schulung
                                    anfragen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

`
`

    <main role="main">
        <header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
            <h1 class="standard-header__title">Unser Schulungsangebot</h1>
            <h2 class="standard-header__subtitle">Weil wir Wissen gerne mit Ihnen teilen</h2>
            <div class="standard-header__intro">
                <div class="standard-header__intro__text">
                    Sich auf das Wissen von Beratern und externen Dienstleistern zu verlassen ist das Eine, das Wissen im
                    eigenen Haus zu vertiefen, um die Leistung Dritter beurteilen zu können das Andere. INNOQ unterstützt
                    Sie natürlich auch beim „Anderen“,
                    sodass Sie nicht immer auf unsere Projektbegleitung angewiesen sind.
                </div>
            </div>
        </header>

        <article class="page-layout-md--default">
            <p>Wir bieten Schulungen zu bewährten und aktuellen Themen an. Dabei achten wir immer darauf, dass die
                Inhalte einen hohen Praxisbezug haben und wenden einprägsame Methoden an.</p>
            <p>Darüber hinaus können Ihre Mitarbeiter bei uns Ausbildungen zum iSAQB Certified Professional for Software
                Architecture (CPSA) – Foundation Level besuchen und sich anschließend zertifizieren lassen.</p>
        </article>
        <article class="stripe stripe--gray">
            <section class="page-layout-md--default">
                <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
                <a class=" list-teaser-training primary">
                    <div class="list-teaser__body">
                        <h2 class="list-teaser-training__headline">Titel</h2>
                        <div class="list-teaser-training__caption">Untertitel</div>
                        <div class="label-big badge badge--inverted">Labeltext</div>
                    </div>
                    <div class="list-teaser__footer">
                        <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
                    </div>
                </a>

                <a class="list-teaser-training secondary">
                    <div class="list-teaser__body">
                        <h2 class="list-teaser-training__headline">Titel</h2>
                        <div class="list-teaser-training__caption">Untertitel</div>
                        <div class="label-big badge">Labeltext</div>
                    </div>
                    <div class="list-teaser__footer">
                        <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
                    </div>
                </a>
                <div class="tile-grid-sm">
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                    <div class="label-big badge">
                                        Interaktiv!
                                    </div>
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                        <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                            <div class="case-tile-teaser__body">
                                <h2 class="case-tile-teaser__caption">Training Caption</h2>
                                <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                    Training Headline
                                </h2>
                                <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                </div>
                            </div>
                            <div class="case-tile-teaser__goto">
                                <span class="link-teaser">Termine &amp; Details</span>
                            </div>
                        </div>
                    </a>
                </div>
            </section>
        </article>
        <article class="page-layout-md--default">
                <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
                <div class="tile-grid-sm">
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                    <div class="simple-teaser">
                        <div class="simple-teaser__body">
                            <a class="simple-teaser__link">
                                <h5>Inhouse Schulung Titel</h5>
                                <h6>Das ist ein Untertitel</h6>
                            </a>
                        </div>
                        <div class="simple-teaser__footer">
                            <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                                Jetzt anfragen!
                            </button>
                        </div>
                    </div>
                </div>
        </article>
        <div class="default-full-width-teaser bg-image-trainings-03">
            <div class="default-full-width-teaser__wrapper">
                <div class="default-full-width-teaser__body">
                    <div>
                        <div class="default-full-width-teaser__caption">Individuelle Schulungen</div>
                        <div>
                            <div class="default-full-width-teaser__header">
                                <h2>Auf Ihr Bedürfnis angepasst</h2>
                            </div>
                            <div class="default-full-width-teaser">
                                Ich erhalte Informationen dazu, das ich die Schulungsinhalte individualisieren kann, den
                                Umfang
                                individualisieren kann, etc. Ich erhalte Informationen dazu, das ich die
                                Schulungsinhalte individualisieren
                                kann, den Umfang individualisieren kann, etc. Ich erhalte Informationen dazu, das ich
                                die Schulungsinhalte
                                individualisieren kann, den Umfang individualisieren kann, etc.
                            </div>
                            <div class="default-full-width-teaser__footer">
                                <a href="#" class="btn btn--small btn--cta" data-label="Schulung anfragen">Schulung
                                    anfragen</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      //TODO

  `
- URL: /components/raw/trainings-overview-page/_trainings-overview-page.scss
- Filesystem Path: components/01-pages/training-pages/trainings-overview-page/_trainings-overview-page.scss
- Size: 7 Bytes

- Handle: @trainings-overview-page
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/01-pages/training-pages/trainings-overview-page/trainings-overview-page.html

No notes defined.