This repository has been archived on 2024-01-26. You can view files and clone it, but cannot push or open issues or pull requests.
calcifer/web/semantic/examples/attached.html
Tim Schumacher 4385f1acbc Update Semantic to 2.1
Ticket #56
2016-06-10 00:34:34 +02:00

381 lines
8.8 KiB
HTML

<!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>Attached - 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/container.css">
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
<link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
<link rel="stylesheet" type="text/css" href="../dist/components/table.css">
<link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
<link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
<link rel="stylesheet" type="text/css" href="../dist/components/message.css">
<style type="text/css">
h2 {
margin: 2em 0em;
}
.ui.container {
padding-top: 5em;
padding-bottom: 5em;
}
</style>
</head>
<body>
<div class="ui container">
<h2 class="ui header">Attached Content</h2>
<div class="ui three column grid">
<div class="column">
<div class="top attached ui segment">
Segment 1
</div>
<div class="attached ui segment">
Segment 2
</div>
<div class="attached ui segment">
Segment 2
</div>
<div class="bottom attached ui segment">
Segment 3
</div>
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segments">
<div class="ui segment">
<p>Nested Top</p>
</div>
<div class="ui segment">
<p>Nested Middle</p>
</div>
<div class="ui segment">
<p>Nested Bottom</p>
</div>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui horizontal segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="column">
<table class="top attached ui basic table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<table class="attached ui table">
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<table class="attached ui celled selectable table">
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<table class="bottom attached ui celled table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<div class="top attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="bottom attached ui three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui top attached tabular menu">
<a class="active item">Active Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui bottom attached segment">
Segment
</div>
<div class="ui top attached menu">
<a class="active item">Active Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui bottom attached segment">
Segment
</div>
</div>
</div>
</div>
<div class="ui text container">
<h2 class="ui header">Header Groups</h2>
<h4 class="ui top attached block header">
Top Block Header
</h4>
<div class="ui bottom attached segment">
Segment
</div>
<div class="ui section divider"></div>
<div class="ui top attached segment">
Segment
</div>
<h4 class="ui bottom attached block header">
Bottom Block Header
</h4>
<div class="ui section divider"></div>
<h4 class="ui top attached block header">
Top Block Header
</h4>
<div class="ui attached segment">
Segment
</div>
<h4 class="ui attached block header">
Middle Block Header
</h4>
<div class="ui attached segment">
Segment
</div>
<h4 class="ui bottom attached block header">
Bottom Block Header
</h4>
<h2 class="ui header">Mixed Attached Content</h2>
<div class="ui section divider"></div>
<div class="ui top attached segment">Segment</div>
<div class="ui attached three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui attached segment">
1
</div>
<div class="ui attached icon info message">
<i class="help circle icon"></i>
<div class="content">
Message
</div>
</div>
<table class="ui bottom attached table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<div class="ui section divider"></div>
<div class="ui top attached warning icon message">
<i class="attention icon"></i>
<div class="content">
Message
</div>
</div>
<table class="ui attached table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<div class="ui bottom attached three item menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<div class="ui section divider"></div>
<div class="ui top attached three item inverted menu">
<a class="item">Item</a>
<a class="item">Item</a>
<a class="item">Item</a>
</div>
<table class="ui attached inverted table">
<thead>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<div class="ui bottom attached inverted segment">
Segment
</div>
</div>
</body>
</html>