<div class="ys-notification">
    <span class="ys-notification__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 12"><g fill="none" fill-rule="evenodd"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5v6"/><path fill="currentColor" d="M2 1a1 1 0 11-2 0 1 1 0 012 0"/></g></svg>
    </span>
    <div class="ys-notification__content">
        <p class="ys-notification__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#" class="ys-notification__inline-link">Link titel her</a> </p>
    </div>
</div>

<div class="ys-notification ys-notification--warning">
    <span class="ys-notification__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 12"><g fill="none" fill-rule="evenodd"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1v6"/><path fill="currentColor" d="M2 11a1 1 0 11-2 0 1 1 0 012 0"/></g></svg>
    </span>
    <div class="ys-notification__content">
        <p class="ys-notification__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#" class="ys-notification__inline-link">Link titel her</a> </p>
    </div>
</div>

<div class="ys-notification ys-notification--success">
    <span class="ys-notification__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 10"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1.5 5.124L5.01 8.75l5.49-7.5"/></svg>
    </span>
    <div class="ys-notification__content">
        <p class="ys-notification__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#" class="ys-notification__inline-link">Link titel her</a> </p>
    </div>
</div>

<div class="ys-notification ys-notification--error">
    <span class="ys-notification__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 12"><g fill="none" fill-rule="evenodd"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1v6"/><path fill="currentColor" d="M2 11a1 1 0 11-2 0 1 1 0 012 0"/></g></svg>
    </span>
    <div class="ys-notification__content">
        <p class="ys-notification__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#" class="ys-notification__inline-link">Link titel her</a> </p>
    </div>
</div>

<div class="ys-notification ys-notification--no-shadow">
    <span class="ys-notification__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 12"><g fill="none" fill-rule="evenodd"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5v6"/><path fill="currentColor" d="M2 1a1 1 0 11-2 0 1 1 0 012 0"/></g></svg>
    </span>
    <div class="ys-notification__content">
        <p class="ys-notification__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#" class="ys-notification__inline-link">Link titel her</a> </p>
    </div>
</div>