Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Captioned Image 

<div class=" captioned-image ">
    <div class=" media ">
        <img class="media__item" src="/demo/teaser/teaser6.jpg" alt=>
    </div>

    <div class="captioned-image__caption ">
        RAUTOOL A-light2 Kombi mit 3-fach Jochsatz
    </div>
</div>
 
<div class="{{mixes}} captioned-image {{modifiers}}">
  {{render '@atoms-media--image' image}}

  {{#caption}}
    <div class="captioned-image__caption {{modifiers}}">
      {{text}}
    </div>
  {{/caption}}
</div>
 
{
  "image": {
    "src": "/demo/teaser/teaser6.jpg"
  },
  "caption": {
    "text": "RAUTOOL A-light2 Kombi mit 3-fach Jochsatz"
  }
}
  • Content: 
    .captioned-image {
  $root: &;

  margin: 0;
  padding: 0;

  &__caption {
    background-color: $gray-lighter;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: rem-calc($gutter / 2) rem-calc($gutter);
      }
    }

    // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
    a:has(&) {
      color: $black;
    }
  }

  &.-light {
    #{$root}__caption {
      background-color: $white;
    }
  }
}
  • URL: /components/raw/molecules-captioned-image/_captioned-image.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/13-captioned-image/_captioned-image.scss
  • Size: 484 Bytes

There are no notes for this item.