storyteller.io CSS Styleguide

Requests

UI Blocks

11.1

URI

Visually distinguish the segments and parameters that make up a URI and indicate those that are variable. HTTP status and verbs can also be indicated.

GET

200 OK

/ users / 12345 / media ? limit= {amount}

GET

404 Not Found

/ users / 12345 / media ? limit= {amount}
Example Markup
<header class="ui-uri">
    <h1 class="ui-uri__verb">GET</h1>
    <h1 class="ui-uri__status">200 OK</h1>
    <code class="ui-uri__separator">/</code>
    <code class="ui-uri__static-segment">users</code>
    <code class="ui-uri__separator">/</code>
    <code class="ui-uri__dynamic-segment">12345</code>
    <code class="ui-uri__separator">/</code>
    <code class="ui-uri__static-segment">media</code>
    <code class="ui-uri__separator">?</code>
    <code class="ui-uri__static-segment">limit=</code>
    <code class="ui-uri__dynamic-segment">{amount}</code>
</header>

<header class="ui-uri">
    <h1 class="ui-uri__verb">GET</h1>
    <h1 class="ui-uri__status--error">404 Not Found</h1>
    <code class="ui-uri__separator">/</code>
    <code class="ui-uri__static-segment">users</code>
    <code class="ui-uri__separator">/</code>
    <code class="ui-uri__dynamic-segment">12345</code>
    <code class="ui-uri__separator">/</code>
    <code class="ui-uri__static-segment">media</code>
    <code class="ui-uri__separator">?</code>
    <code class="ui-uri__static-segment">limit=</code>
    <code class="ui-uri__dynamic-segment">{amount}</code>
</header>