<section class="Grid Grid--withGutter u-padding-all-l">
    <div class="Grid-cell u-md-size1of3 u-lg-size1of3">
        <div class="Card Card--withBorder Card--round u-color-grey-30">
            <div class="Card-image">
                <img src="//placehold.it/400x220" class="u-sizeFull" alt="laborum neque nemo" />
            </div>
            <div class="Card-content u-padding-r-all">
                <p class="Card-extra"><a class="Card-extraLink" href="">quae qui et</a></p>
                <h3 class="Card-title"><a class="Card-titleLink" href="">Fugiat aut eaque molestias.</a></h3>
                <p class="Card-text">Quasi tempora occaecati eum dolorem modi enim maiores et. Autem et magnam eos non qui ut dignissimos. Sit consequatur dolores voluptas nobis omnis consequatur. Quaerat explicabo autem quod dolores. Ab dolorem praesentium. Quo minus doloribus
                    ipsam officiis quia.</p>
            </div>
        </div>
    </div>
</section>
  • Content:
    /** @define Card; */
    
    .Card {
      overflow: hidden;
    }
    
    .Card--withBorder {
      @extend .u-border-all-xxs;
    }
    
    .Card--shadow {
      @extend .u-borderShadow-xxs;
      @extend .u-border-none;
    }
    
    .Card--round {
      @extend .u-borderRadius-m;
    }
    
    .Card-extra {
      @extend .u-text-h6;
      @extend .u-margin-bottom-l;
      @extend .u-textClean;
    }
    
    .Card-extraLink {
      @extend .u-textClean;
    }
    
    .Card-content {
      @extend .u-text-r-l;
      @extend .u-padding-r-all;
    }
    
    .Card-title {
      @extend .u-text-h4;
      @extend .u-margin-r-bottom;
      @extend .u-layout-prose;
    }
    
    .Card-titleLink {
      @extend .u-text-m;
      @extend .u-color-black;
      @extend .u-textWeight-400;
      @extend .u-textClean;
    }
    
    .Card-text {
      @extend .u-text-r-xs;
      @extend .u-layout-prose;
      @extend .u-lineHeight-xl;
      @extend .u-textSecondary;
      @extend .u-margin-bottom-l;
    }
    
  • URL: /components/raw/card/index.css
  • Filesystem Path: src/modules/card/index.css
  • Size: 805 Bytes

There are no notes for this item.