richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added example for messages component

pull/6305/head
tcmal 6 years ago
parent
789d020a39
commit
91044f1ae2
1 changed files with 156 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 156
      examples/components/message.html

156
examples/components/message.html
View File

@ -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