Pleasance Styleguide

Content warnings 

<aside class="warnings mt-3 p-3 border-top border-2 border-primary d-flex align-items-center">
    <div class="warnings--icon p-0 me-2 d-flex ">
        <svg>
            <use xlink:href="#info"></use>
        </svg>
    </div>
    <div class="warnings--copy ms-2">
        <p>Content warnings lorem ipsum dolor sit amet consectetur, adipisicing elit. At cumque neque quidem. Veritatis cum ut corrupti sit consequatur soluta laudantium facere voluptate similique? Voluptatem modi doloribus recusandae reiciendis suscipit cumque.</p>
    </div>
</aside>
 
<aside class="warnings mt-3 p-3 border-top border-2 border-primary d-flex align-items-center">
  <div class="warnings--icon p-0 me-2 d-flex ">
    <svg>
      <use xlink:href="#info"></use>
    </svg>
  </div>
  <div class="warnings--copy ms-2">
    <p>{{ copy | replace({"\n\n":'</p><p>'}) }}</p>
  </div>
</aside>
 
{
  "copy": "Content warnings lorem ipsum dolor sit amet consectetur, adipisicing elit. At cumque neque quidem. Veritatis cum ut corrupti sit consequatur soluta laudantium facere voluptate similique? Voluptatem modi doloribus recusandae reiciendis suscipit cumque."
}
  • Content: 
    .warnings {
  &--icon {
    width: 1.5rem;
    height: 1.5rem;

    svg {
      use {
        fill: $secondary;
      }
    }
  }

  &--copy {
    p {
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
  • URL: /components/raw/warnings/warnings.scss
  • Filesystem Path: src/components/02-structures/warnings/warnings.scss
  • Size: 217 Bytes

No notes defined.