360Giving Design System - Components

Prose Figure 

<div class="prose">

    <figure>
        <img src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg" alt="">
        <figcaption>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. <em>Fuga deleniti architecto nisi</em>, rerum aliquid aperiam minima <strong>saepe magnam eum. Odit aliquid similique magnam minima</strong>, corrupti, aliquam laudantium eos asperiores possimus?</figcaption>
    </figure>

</div>
 
<div class="prose"> {# This element is here, just to make it render properly #}
  {# This is the component itself #}
  <figure>
    <img src="https://www.threesixtygiving.org/wp-content/uploads/47319360032_51d21156a2_c.jpg" alt="">
    <figcaption>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. <em>Fuga deleniti architecto nisi</em>, rerum aliquid aperiam minima <strong>saepe magnam eum. Odit aliquid similique magnam minima</strong>, corrupti, aliquam laudantium eos asperiores possimus?</figcaption>
  </figure>

</div>
 
/* No context defined. */
  • Content: 
    .prose {
  figure {
    box-shadow: 0px 4px 8px hsla(var(--base-hsl), .15);
  }

  figcaption {
    font-size: 85%;
    padding: 1.5rem;
  }
}
  • URL: /components/raw/prose-figure/prose-figure.scss
  • Filesystem Path: src/components/03-components/prose-figure/prose-figure.scss
  • Size: 142 Bytes

No notes defined.