ecardilly Design Components

Toast 

<ul class="toast_list">
    <li class="toast --default">
        <div class="toast_icon"><i class="ph-bold ph-check-circle"></i></div>
        <div class="toast_message">URL in die Zwischenlage kopiert</div>
    </li>
    <li class="toast --error">
        <div class="toast_icon"><i class="ph-bold ph-warning-circle"></i></div>
        <div class="toast_message">Error 420 – Das hat nicht geklappt</div>
    </li>
    <li class="toast --success">
        <div class="toast_icon"><i class="ph-bold ph-check-circle"></i></div>
        <div class="toast_message">Deine eCard wurde veröffentlicht</div>
    </li>
</ul>
 
<ul class="toast_list">
	{{#each toasts}}
		<li class="toast --{{type}}">
			<div class="toast_icon"><i class="ph-bold {{icon}}"></i></div>
			<div class="toast_message">{{message}}</div>
		</li>
	{{/each}}
</ul>
 
{
  "toasts": [
    {
      "type": "default",
      "icon": "ph-check-circle",
      "message": "URL in die Zwischenlage kopiert"
    },
    {
      "type": "error",
      "icon": "ph-warning-circle",
      "message": "Error 420 – Das hat nicht geklappt"
    },
    {
      "type": "success",
      "icon": "ph-check-circle",
      "message": "Deine eCard wurde veröffentlicht"
    }
  ]
}

No notes defined.