Structure
What holds the rest together: dividers, collapses, tabs, cards, tables and the sections of the landing page.
Dividers
An <hr> separates the main action from the links below it, like a footer. In a card it is a line; on the log in pages it is only room, like on pos.usecue.com. A line with “or” in the middle offers another way to do the same, like single sign-on below the log in form.
Log in with GoogleHTML
<div class="card raised" style="max-width: 360px">
<h2>Log in</h2>
<form data-demo>
<div class="form-group">
<label for="sso-username">Username</label>
<input id="sso-username" name="username" autocomplete="username">
</div>
<button class="button">Log in</button>
</form>
<div class="divider">or</div>
<div class="sso">
<a href="#dividers" class="button ghost wide"><img src="/img/google.svg" alt="">Log in with Google</a>
<a href="#dividers" class="button ghost wide">Log in with SSO</a>
</div>
<hr>
<p>New user? <a href="#dividers">Register</a></p>
</div>Collapses
The questions of cms.usecue.com: a click opens the answer and the plus turns into a minus. js/collapse.js slides them open and closed, also when you click again halfway. Every <details> is one, without a class. With the same name, only one is open at a time. Without the script they still open and close, only without the slide.
Do I have to host my website with you?
Yes. The CMS and the hosting are one. That is why publishing takes a second, and why forms and statistics work without plugins.
Can I undo a change?
Yes. Every change is a commit in Git, so every earlier version of a page can be brought back.
Can I leave?
Yes. Your content is plain markdown in Git, and your website builds with standard Hugo.
You can take it anywhere.
HTML
<details name="questions">
<summary>Do I have to host my website with you?</summary>
<p>Yes. The CMS and the hosting are one. That is why publishing takes a second, and why forms and statistics work without plugins.</p>
</details>
<details name="questions">
<summary>Can I undo a change?</summary>
<p>Yes. Every change is a commit in Git, so every earlier version of a page can be brought back.</p>
</details>
<details name="questions">
<summary>Can I leave?</summary>
<div>
<p>Yes. Your content is plain markdown in Git, and your website builds with standard Hugo.</p>
<p>You can take it anywhere.</p>
</div>
</details>Without a name
Each opens and closes on its own. small gives the chevron of the html below each example.
Do I need to install anything?
No. Pages load through our server, so nothing goes on your website.
Do my clients need an account?
No. Anyone with the link can add annotations and reply.
Show the details
A small collapse, for what is only there when you need it.
HTML
<details>
<summary>Do I need to install anything?</summary>
<p>No. Pages load through our server, so nothing goes on your website.</p>
</details>
<details open>
<summary>Do my clients need an account?</summary>
<p>No. Anyone with the link can add annotations and reply.</p>
</details>
<details class="small">
<summary>Show the details</summary>
<p>A small collapse, for what is only there when you need it.</p>
</details>Tabs
Each tab its own page, like the account pages of annotate.now: aria-current="page" marks the one you are on.
HTML
<nav class="tabs" aria-label="Account">
<a href="#tabs" aria-current="page">Info</a>
<a href="#tabs">Password</a>
<a href="#tabs">Security</a>
</nav>Cards
A box with a line around it, or a white box with a shadow on the gray of the app.
Boards
Every board you made, with its annotations.
HTML
<div class="card">
<h3>Boards</h3>
<p>Every board you made, with its annotations.</p>
</div>
<div class="card raised" style="max-width: 380px">
<h2>Set your password</h2>
<p class="muted">We mail you a link to set a new password.</p>
<p><a href="#cards" class="button">Send link</a></p>
</div>Tables
Lines between the rows, the headings muted, the actions on the right. details for a table with its labels in the first column.
| Cron | Last run | |
|---|---|---|
| Backup | Today 03:00 | Log |
| Clean up | Today 04:00 | Log |
| Statistics | Yesterday 23:00 | Log |
| Running | Log |
| Name | Your name |
|---|---|
| name@example.com | |
| Role | Owner |
HTML
<table>
<thead>
<tr><th>Cron</th><th>Last run</th><th></th></tr>
</thead>
<tbody>
<tr><td><span class="status-dot succeeded"></span>Backup</td><td>Today 03:00</td><td class="actions"><a href="#tables" class="button small ghost">Log</a></td></tr>
<tr><td><span class="status-dot failed"></span>Clean up</td><td>Today 04:00</td><td class="actions"><a href="#tables" class="button small ghost">Log</a></td></tr>
<tr><td><span class="status-dot missed"></span>Statistics</td><td>Yesterday 23:00</td><td class="actions"><a href="#tables" class="button small ghost">Log</a></td></tr>
<tr><td><span class="status-dot"></span>Mail</td><td>Running</td><td class="actions"><a href="#tables" class="button small ghost">Log</a></td></tr>
</tbody>
</table>
<table class="details">
<tr><th>Name</th><td>Your name</td></tr>
<tr><th>E-mail</th><td>name@example.com</td></tr>
<tr><th>Role</th><td>Owner</td></tr>
</table>Page sections
The sections of the homepage are on the landing page: the hero with the two windows of cms.usecue.com, the steps, the features, the questions, the close and the numbers that count up.