showcar-ui/src/06-components/organisms/superhero/docs/superhero-deprecated.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<!-- 
  ************
    EXAMPLE 1 
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs">
      <a href="#">
        <img src="/showcar-ui/docs/assets/images/showcar-logo-superhero.jpg">
      </a>
    </div>

    <div class="sc-superhero__content sc-superhero__content--light">
      <span class="sc-disruptor sc-font-uppercase">Neu</span>
      <h2 class="sc-superhero__title sc-margin-top-m">Title for Superhero</h2>
      <p class="sc-padding-bottom-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Curabitur blandit, neque eu gravida convallis, libero lorem elementum enim, 
          non sodales arcu erat non tortor.
      </p>
      <ul class="sc-list sc-list--disc sc-padding-bottom-xl">
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
      </ul>
      <button class="sc-btn-bob">I am Bob!</button>
      <span class="sc-block sc-margin-top-xxl sc-font-s">* some footnotes</span>
    </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 2
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs">
      <a href="#">
        <img src="/showcar-ui/docs/assets/images/showcar-logo-superhero.jpg">
      </a>
    </div>

    <div class="sc-superhero__content sc-superhero__content--light">
      <span class="sc-disruptor sc-font-uppercase">Neu</span>
      <h3 class="sc-superhero__title sc-margin-top-m">Title for Superhero that is quite long</h3>
    </div>
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 3
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs">
      <a href="#">
        <img src="/showcar-ui/docs/assets/images/showcar-logo-superhero.jpg">
      </a>
    </div>

    <div class="sc-superhero__content">
      <h3 class="sc-superhero__title sc-margin-top-m">Title for Superhero</h3>
      <p class="sc-padding-bottom-xl">
          Lorem ipsum dolor sit amet, consectetur adipiscing.
      </p>
    </div>
      
</div>

<!-- -->

<br><br>
<hr>
<br><br>

<!-- 
  ************
    EXAMPLE 4 
  ************
-->

<style>
    .sc-superhero__imgs {
      background-image: url('https://via.placeholder.com/480x270');
    }

    @media screen and (min-width: 768px) {
      .sc-superhero__imgs {
        background-image: none;
      }

      .sc-superhero {
        background-image: url('https://via.placeholder.com/768x432');
      }
    }

    @media screen and (min-width: 1024px) {
      .sc-superhero {
        background-image: url('https://via.placeholder.com/1100x430');
      }
    }
</style>

<div class="sc-superhero">
    <div class="sc-superhero__imgs"></div>

    <div class="sc-superhero__content sc-superhero__content--light">
      <span class="sc-disruptor sc-font-uppercase">Neu</span>
      <h2 class="sc-superhero__title sc-margin-top-m">Title for Superhero</h2>
      <p>
        That text needs to be explaned
        <as24-tooltip class="sc-tooltip">
          <as24-icon type="info" style="width: 16px;"></as24-icon>
          <span class="sc-tooltip-content">Information in tooltip <a href="/">link</a></span>
        </as24-tooltip>
      </p>
      <span class="sc-block sc-margin-top-xxl sc-font-s">* some footnotes</span>
    </div>
</div>