Topic Page 

<header class="topic-header bg-image-edition-04">
    <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 bg-image-edition-04">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>
        <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
    </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autor Zwei</a></li>
                        <li><a href="#">Doktor Drei</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autorin Zwei</a></li>
                        <li><a href="#">Doktor Drei</a></li>
                        <li><a href="#">Und Vier</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autorin Zwei</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autor Zwei</a></li>
                    </ul>
                </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>
 
<header class="topic-header bg-image-edition-04">
    <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 bg-image-edition-04">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>
        <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
    </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autor Zwei</a></li>
                        <li><a href="#">Doktor Drei</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autorin Zwei</a></li>
                        <li><a href="#">Doktor Drei</a></li>
                        <li><a href="#">Und Vier</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autorin Zwei</a></li>
                    </ul>
                </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>
                    <ul class="resource-list-item__author">
                        <li><a href="#">Autorin Eins</a></li>
                        <li><a href="#">Autor Zwei</a></li>
                    </ul>
                </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>
 
/* No context defined. */
  • 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;
  border: 3px solid $brand-white;
  width: 50%;
}

.resource-list-item__author {
  @extend %heading-font-regular;

  margin-bottom: $spacer-lg;
  padding-left: 0;
  color: $brand-primary;
  font-size: $font-size-base;

  > li {
    @extend %list-unstyled;
    margin-bottom: $spacer-xxs;

    > a {
      @extend %link-unstyled;

      &:focus,
      &:hover {
        @extend %heading-font-bold;
        background-color: $brand-text-light;
      }
    }
  }
}

.resource-list-item__title {
  margin-bottom: $spacer-xs;
  color: $brand-text-light;
}

.resource-list-item__caption {
  @extend %heading-font-regular;

  margin-bottom: $spacer-md;
  font-size: $font-size-base;
}

.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: 2 KB

No notes defined.