• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. As success message
    2. As error message
    3. As info message
    4. As warning message
    5. With custom icon
  2. Properties
  3. Shadow Parts
  4. Dependencies
    1. Depends on
    2. Graph
Components Notice
(external link)

ld-notice #

This component is meant to be used in conjunction with the ld-input and the ld-label component. Please reffer to the ld-input docs for further usage examples.

Examples #

As success message #

<ld-notice headline="Success message" mode="success">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</ld-notice>
<div class="ld-notice ld-notice--success">
<!-- Note that you can use an img element with the class ld-notice__icon here, as well. -->
<svg class="ld-notice__icon ld-icon ld-icon--lg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24.5C18.6274 24.5 24 19.1274 24 12.5C24 5.87258 18.6274 0.5 12 0.5C5.37258 0.5 0 5.87258 0 12.5C0 19.1274 5.37258 24.5 12 24.5Z" fill="currentColor"/>
<path d="M16.898 9.56123L10.4404 15.4388L7.10205 12.147" stroke="var(--ld-icon-secondary-col)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="ld-notice__headline ld-typo--h4">Success message</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</div>
<LdNotice headline="Success message" mode="success">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</LdNotice>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

Success message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

As error message #

<ld-notice headline="An error occurred" mode="error">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</ld-notice>
<div class="ld-notice ld-notice--error">
<!-- Note that you can use an img element with the class ld-notice__icon here, as well. -->
<svg class="ld-notice__icon ld-icon ld-icon--lg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-icon-secondary-col)"/>
<ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-icon-secondary-col)"/>
</svg>
<p class="ld-notice__headline ld-typo--h4">An error occurred</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</div>
<LdNotice headline="An error occurred" mode="error">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</LdNotice>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

An error occurred

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

As info message #

<ld-notice headline="Information">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</ld-notice>
<div class="ld-notice ld-notice--info">
<!-- Note that you can use an img element with the class ld-notice__icon here, as well. -->
<svg class="ld-notice__icon ld-icon ld-icon--lg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-icon-secondary-col)"/>
<ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-icon-secondary-col)"/>
</svg>
<p class="ld-notice__headline ld-typo--h4">Information</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</div>
<LdNotice headline="Information">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</LdNotice>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

As warning message #

<ld-notice headline="Warning!" mode="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</ld-notice>
<div class="ld-notice ld-notice--warning">
<!-- Note that you can use an img element with the class ld-notice__icon here, as well. -->
<svg class="ld-notice__icon ld-icon ld-icon--lg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="var(--ld-icon-secondary-col)"/>
<ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="var(--ld-icon-secondary-col)"/>
</svg>
<p class="ld-notice__headline ld-typo--h4">Warning!</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</div>
<LdNotice headline="Warning!" mode="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</LdNotice>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

Warning!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

With custom icon #

<ld-notice headline="With custom icon" mode="success">
<ld-icon slot="custom-icon" name="placeholder" size="lg"></ld-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</ld-notice>
<div class="ld-notice ld-notice--success">
<!-- Note that you can use an img element with the class ld-notice__icon here, as well. -->
<svg class="ld-notice__icon ld-icon ld-icon--lg" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="14" height="14" rx="3" stroke="currentcolor" stroke-width="2"/><circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="2"/></svg>
<p class="ld-notice__headline ld-typo--h4">With custom icon</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</div>
<LdNotice headline="With custom icon" mode="success">
<LdIcon slot="custom-icon" name="placeholder" size="lg" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus
pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio
quam ut elementum. Faucibus cursus in placerat enim non senectus. In
molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada
vulputate et congue blandit in erat ornare. Rhoncus interdum.
</LdNotice>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

With custom icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus pellentesque facilisi nunc iaculis. Laoreet eget eu lacus cursus odio quam ut elementum. Faucibus cursus in placerat enim non senectus. In molestie volutpat at sem bibendum ac id. Suspendisse erat malesuada vulputate et congue blandit in erat ornare. Rhoncus interdum.

Properties #

Property Attribute Description Type Default
headline headline Headline of the notice. string undefined
key key for tracking the node's identity when working with lists string | number undefined
mode mode Mode of the notice. "error" | "info" | "success" | "warning" 'info'
ref ref reference to component any undefined

Shadow Parts #

Part Description
"headline" ld-typo element used for the headline
"icon" Image tag used for the icon

Dependencies #

Depends on #

  • ld-icon
  • ld-typo

Graph #

graph TD;
ld-notice --> ld-icon
ld-notice --> ld-typo
style ld-notice fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS