Images

<div class="container mb-5">
    <div class="desc desc-line">Images</div>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
            <img src="https://via.placeholder.com/405x231" class="img-fluid">
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
            <img src="https://via.placeholder.com/405x231" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x444" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x444" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row mt-4 py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x370" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x370" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x606" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x606" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>
</div>
<div class="container mb-5">
    <div class="desc desc-line">Images</div>
    <div class="row py-4 justify-content-between">
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
            <img src="https://via.placeholder.com/405x231" class="img-fluid">
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-3">
            <img src="https://via.placeholder.com/405x231" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x290" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x444" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x444" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row mt-4 py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x370" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-3">
            <img src="https://via.placeholder.com/550x370" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>

    <div class="row py-4 justify-content-between">
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x606" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-3">
            <img src="https://via.placeholder.com/840x606" class="img-fluid">
            <a href="#" class="btn btn-contained pos--bottom-left">Category Teaser</a>
        </div>
    </div>
</div>
/* Kein Inhalt definiert. */
  • Inhalt:
    .image-container {
        position: relative;
        img {
          width: 100%;
          max-width: 100%;
        }
      }
  • URL: /components/raw/images/images.scss
  • Pfad Dateisystem: components\01-general\images\images.scss
  • Größe: 110 Bytes

Keine Notizen vorhanden.