123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381 |
- <!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>
|