tcmal
6 years ago
1 changed files with 156 additions and 0 deletions
Split View
Diff Options
@ -0,0 +1,156 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<!-- Standard Meta --> |
|||
<meta charset="utf-8" /> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
|||
|
|||
<!-- Site Properties --> |
|||
<title>Messages - Semantic</title> |
|||
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css"> |
|||
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css"> |
|||
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css"> |
|||
|
|||
<link rel="stylesheet" type="text/css" href="../../dist/components/message.css"> |
|||
<link rel="stylesheet" type="text/css" href="../../dist/components/font.css"> |
|||
|
|||
|
|||
<script src="../assets/library/iframe-content.js"></script> |
|||
|
|||
<style> |
|||
body { |
|||
padding: 1em; |
|||
} |
|||
</style> |
|||
</head> |
|||
|
|||
<body> |
|||
<div class="ui five column grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
|
|||
<div class="ui message"> |
|||
Basic Message |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui message"> |
|||
<div class="header"> |
|||
List Message |
|||
</div> |
|||
<ul class="list"> |
|||
<li>List item 1</li> |
|||
<li>List item 2</li> |
|||
<li>List item 3</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="column"> |
|||
<div class="ui icon message"> |
|||
<i class="inbox icon"></i> |
|||
<div class="content"> |
|||
<div class="header"> |
|||
Icon Message |
|||
</div> |
|||
<p>Example w/ inbox icon</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui compact message"> |
|||
Compact message |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui floating message"> |
|||
Floating message |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui message error">Error Message</div> |
|||
|
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui warning message">Warning Message</div> |
|||
|
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui message success">Success Message</div> |
|||
|
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui message info">Info Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui message floating info">Floating Info Message</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui twelve column grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui red message">Red Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui orange message">Orange Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui yellow message">Yellow Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui olive message">Olive Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui green message">Green Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui teal message">Teal Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui blue message">Blue Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui violet message">Violet Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui purple message">Purple Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui pink message">Pink Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui brown message">Brown Message</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui black message">Black Message</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui mini message"> |
|||
Mini message. |
|||
</div> |
|||
<div class="ui tiny message"> |
|||
Tiny message. |
|||
</div> |
|||
<div class="ui small message"> |
|||
Small message. |
|||
</div> |
|||
<div class="ui large message"> |
|||
Large Message |
|||
</div> |
|||
<div class="ui big message"> |
|||
Big Message |
|||
</div> |
|||
<div class="ui huge message"> |
|||
Huge Message |
|||
</div> |
|||
<div class="ui massive message"> |
|||
Massive Message |
|||
</div> |
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save