There's a new version of UIDS!

UIDS - UI Design System

There are no notes for this item.

Media

Component Preview 
<div class="">
    <img alt="" sizes="(min-width:1310px) 1310px, 100vw" srcset="https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image.jpg 384w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image.jpg 768w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image.jpg 1024w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image.jpg 1312w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image.jpg 1920w,https://sandbox.prod.drupal.uiowa.edu/sites/sandbox.uiowa.edu/files/2021-03/bg-image.jpg 2592w," src="" typeof="foaf:Image">
</div>
  • Content: 
    @mixin media-border {
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

@mixin media-circle {
  border-radius: 50%;
  margin-top: 0;
  height: auto;
}
  • URL: /components/raw/media/_media-mixins.scss
  • Filesystem Path: src/components/media/_media-mixins.scss
  • Size: 162 Bytes
  • Content: 
    .media--border {
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.125); }
  .media--border img {
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.125); }

.media--circle {
  border-radius: 50%;
  margin-top: 0;
  height: auto; }
  .media--circle img {
    border-radius: 50%;
    margin-top: 0;
    height: auto; }
  • URL: /components/raw/media/media.css
  • Filesystem Path: src/components/media/media.css
  • Size: 325 Bytes
  • Content: 
    @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';
@import '_media-mixins.scss';

.media {
  &--border {
    @include media-border;
    img {
      @include media-border;
    }
  }

  &--circle {
    @include media-circle;
    img {
      @include media-circle;
    }
  }
}
  • URL: /components/raw/media/media.scss
  • Filesystem Path: src/components/media/media.scss
  • Size: 301 Bytes