Detail Item 

<div class="detail-item">
    <img class="detail-item__image" src="../../assets/example-content/blockchain-primer.jpg" />
    <div class="detail-item-wrapper">
        <div class="detail-item__body">
            <h3 class="detail-item__title">Ich bin eine Headline</h3>
            <div class="detail-item__caption">
                <h3>Ich bin eine Headline</h3>

                <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                <ul>
                    <li>Ich bin ein kleines Listitem</li>
                    <li>Ich bin ein kleines Listitem</li>
                    <li>Ich bin ein kleines Listitem</li>
                </ul>

                <figure>
                    <img src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild Groß" />
                    <figcaption>
                        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                    </figcaption>
                </figure>

                <a href="#">Textlink hier</a>
            </div>
            <ul class="detail-item__author">
                <li><a title="Michael Plöd" href="/de/staff/michael-pl%C3%B6d/">Michael Plöd</a></li>
                <li><a title="Christian Stettler" href="/de/staff/christian-stettler/">Christian Stettler</a></li>
                <li><a title="Eberhard Wolff" href="/de/staff/eberhard-wolff/">Eberhard Wolff</a></li>
            </ul>
        </div>
        <div class="detail-item__footer">
            <a class="link-teaser" href="https://leanpub.com/ddd-referenz">Download</a>
        </div>
    </div>
</div>
 
<div class="detail-item">
    <img class="detail-item__image" src="{{ path '/assets/example-content/blockchain-primer.jpg'}}" />
    <div class="detail-item-wrapper">
        <div class="detail-item__body">
            <h3 class="detail-item__title">{{headline}}</h3>
            <div class="detail-item__caption">
                <h3>{{headline}}</h3>

                <p>{{text}}</p>

                <ul>
                    <li>{{listitem}}</li>
                    <li>{{listitem}}</li>
                    <li>{{listitem}}</li>
                </ul>

                <figure>
                    <img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
                    <figcaption>
                        {{quote}}
                    </figcaption>
                </figure>

                <a href="#">Textlink hier</a>
            </div>
            <ul class="detail-item__author">
                <li><a title="Michael Plöd" href="/de/staff/michael-pl%C3%B6d/">Michael Plöd</a></li>
                <li><a title="Christian Stettler" href="/de/staff/christian-stettler/">Christian Stettler</a></li>
                <li><a title="Eberhard Wolff" href="/de/staff/eberhard-wolff/">Eberhard Wolff</a></li>
            </ul>
        </div>
        <div class="detail-item__footer">
            <a class="link-teaser" href="https://leanpub.com/ddd-referenz">Download</a>
        </div>
    </div>
</div>
 
{
  "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n",
  "text": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
  "text_short": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
  "headline": "Ich bin eine Headline",
  "listitem": "Ich bin ein kleines Listitem",
  "quote": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
}
  • Content: 
    .detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item__image {
  z-index: 2;

  display: block;

  width: 90%;
  max-width: 450px;
  margin: 0 auto $spacer-sm;
  margin-bottom: -$spacer-xxl;

  border: 3px solid $brand-white;
}

.detail-item-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 100%;
  padding: $spacer-md $spacer-sm;

  color: $brand-text-light;

  background-color: $brand-primary;
}

.detail-item__body {
  padding: $spacer-xl * 2 $spacer-md $spacer-md;
}

.detail-item__title {
  color: $brand-secondary;
}

.detail-item__caption {
  > * + * {
    margin-top: $spacer-md;
  }

  > * {
    @extend %heading-font-regular;

    color: $brand-secondary;
  }

  a:not([class]) {
    color: $conclusion-link-color;
    border-bottom: 1px solid $conclusion-link-color;

    &:hover {
      color: $conclusion-link-hover-color;
      border-bottom: 1px solid $conclusion-background-color;
    }
  }

  ul {
    margin-left: $spacer-sm;

    > li {
      padding-left: $spacer-xs;
    }

    li::marker {
      color: $brand-secondary;
    }
    /* stylelint-disable-next-line selector-max-compound-selectors */
    > li,
    > li p {
      @extend %heading-font-regular;

      /* stylelint-disable-next-line selector-max-compound-selectors */
      li::marker {
        color: $brand-secondary;
      }
    }
  }

  code {
    background-color: $conclusion-background-color;
  }
}

.detail-item__author {
  @extend %heading-font-regular;

  margin-top: $spacer-lg;
  padding-left: 0;
  font-size: $font-size-base;
  color: $brand-secondary;

  > li {
    @extend %list-unstyled;

    margin-bottom: $spacer-xxs;

    > a {
      @extend %link-unstyled;

      &:focus,
      &:hover {
        @extend %heading-font-bold;

        background-color: $brand-text-light;
      }
    }
  }
}

.detail-item__footer {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;

  .link-teaser {
    margin-left: $spacer-md;
    color: $brand-text-light;
    border-bottom: 3px solid $brand-secondary;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .detail-item__title {
    font-size: $font-size-xxl;
  }
}
  • URL: /components/raw/detail-item/_detail-item.scss
  • Filesystem Path: components/04-molecules/detail-item/_detail-item.scss
  • Size: 2.2 KB

No notes defined.