Extract notification card into notifications pattern
This commit is contained in:
@@ -63,57 +63,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Component: Notification Card -->
|
|
||||||
<section id="component-notification-card">
|
|
||||||
<p class="sg-preview-label">Component Notification Card</p>
|
|
||||||
|
|
||||||
<div class="sg-preview-area">
|
|
||||||
|
|
||||||
<article class="sg-card" data-component="notification-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
|
||||||
<p class="sg-body">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
|
||||||
zum Unternehmen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="sg-card" data-component="notification-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
|
||||||
<p class="sg-body">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
|
||||||
zum Unternehmen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="sg-card sg-card--notification-white" data-component="notification-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
|
||||||
<p class="sg-body">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
|
||||||
zum Unternehmen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Component: Content Card -->
|
<!-- Component: Content Card -->
|
||||||
<section id="component-content-card">
|
<section id="component-content-card">
|
||||||
<p class="sg-preview-label">Component: Content Card</p>
|
<p class="sg-preview-label">Component: Content Card</p>
|
||||||
|
|||||||
@@ -44,6 +44,7 @@
|
|||||||
<li><a href="./patterns/object-card.html">Object Card</a></li>
|
<li><a href="./patterns/object-card.html">Object Card</a></li>
|
||||||
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
|
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
|
||||||
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
|
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
|
||||||
|
<li><a href="./patterns/notifications.html">Notifications</a></li>
|
||||||
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
|
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
|
||||||
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
|
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
|
||||||
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
|
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
|
||||||
|
|||||||
@@ -0,0 +1,64 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Styleguide – Pattern Notifications</title>
|
||||||
|
<link rel="stylesheet" href="../styleguide.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 class="sg-main-heading">Pattern – Notifications</h1>
|
||||||
|
|
||||||
|
<section id="pattern-notifications">
|
||||||
|
<p class="sg-preview-label">Pattern: Notifications</p>
|
||||||
|
|
||||||
|
<div class="sg-preview-area">
|
||||||
|
|
||||||
|
<article class="sg-card" data-pattern="notification" data-component="notification-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||||
|
zum Unternehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card" data-pattern="notification" data-component="notification-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||||
|
zum Unternehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-card--notification-white" data-pattern="notification" data-component="notification-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
|
||||||
|
zum Unternehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user