drop-in - examples

A collection of examples of different elements and how they are styled; check the source-code for details.

Typography

Regular paragraph with bold text, italic text, and links. You can also use the .muted class for more subtle text.

The font is Writer by @tonsky, a beautiful monospace font.

Buttons

Three distinct button "types" (controlled by the .accent and .danger classes):

Link Button

Disabled states:

Link Button

Forms

Text input Select Textarea File upload

Add a span with .error inside the label:

Text Input [this field is required]

Fieldsets Validation failed

The boxes you have been seeing are <fieldset> with a <legend> for the title.

Add class .error to fieldset for error state.

Add a span with .error inside legend for the error message.

Blocks

This is a blockquote. It has a left border and some padding to set it apart from the main content.

Unordered list:

First item
Second item
Third item with much, much longer text so that it has to wrap onto multiple lines by the limited nature of finite space.

Ordered list:

First item
Second item
Third item with much, much longer text so that it has to wrap onto multiple lines by the limited nature of finite space.

Use <pre><code> for code blocks, which will be styled with a simple border and background:

val results = tasks.mapNotNull { it.runCatching { execute() }.getOrNull() }
scope.launch { results.forEach { channel.send(it) } }

Inline code gets a subtle background.

Layouting

The <section> element provides a flex column layout with a small gap.

The <menu> element creates a horizontal nav bar (accepts the .active and .disabled classes):

foo active disabled bar

Typical Page Structure

<body>
  <div id="root">
    <menu>...</menu>
    <main>
      <fieldset>...</fieldset>
    </main>
  </div>
</body>

The #root container provides the central 1-column bordered box layout with 1200px width (it can be used as the React root container, for example).