Paragraphs
Every button on the site comes from one of the kinds below. Pick the kind by purpose, not by look: the colours, the radius and the font come from the Skin and change with it. Links that act like buttons use the same classes on an a element.
| Button | Class | Use |
|---|---|---|
| DCK Button, the Standard Button | ||
dck-button dck-button--primary | The main action of a page or form, filled with the primary colour. One per view. | |
dck-button dck-button--secondary | Second action next to a primary button: outline in the primary colour, dark text, a light primary tint on hover. Same look as plain Drupal form buttons. | |
dck-button dck-button--tertiary | Quiet action beside a primary button: white with the grey line of the form fields, lifts on hover. Cancel, back, reset password (Fablab login). | |
dck-button dck-button--destructive | Deleting or removing; error colour. Always ask before. | |
dck-button dck-button--disabled | Not available right now; add aria-disabled="true" on links. | |
| DCK Button Sizes | ||
dck-button--compact | Inside tables and cards: the small text size of the ladder; height and padding follow. | |
(none) | Standard: the body text size. One shape for every size, measured in the button’s own text: the space above and below the label is the golden minor of the line (0.382), the space beside it 1.618 × that, and no button is narrower than 1.618 × its height. The sizes differ only in the text size, height and padding follow from it. | |
dck-button--large | Prominent action: text one step up the ladder (h4). | |
dck-button--hero | Hero and landing sections: text two steps up the ladder (h3). | |
| Frame Button | ||
dck-btn-frame | Gradient frame around a white field, heading font one step larger. For calls to action in content; dck-btn-frame--block makes it full width. | |
| Navigation between Pages | ||
dck-btn-nav dck-btn-nav--left | --right | Previous and next between pages (page navigation block); arrow built in. Colour code: the primary surface, like the page itself. | |
upmarkit-page-nav__link (Page Navigation block) | Page tabs at the end of a page: white card with the thin brand line on top (Accent Card look), one per sibling page of the menu. The block builds them from the menu tree, nothing is written by hand; see the Brand Building Canvas. | |
| Navigation on the Same Page | ||
pill-button | Small action pill: copy, show more, jump on the page. Pill radius. Colour code: the third surface (blue) marks actions that stay on the page. Also the button for overlays: add the class openmodal and the target opens over the page (see Images). An icon in front is optional, an svg of 1em (See how on the canvas pages). | |
citation-card__copy, data-label-copied, data-copy-text | Copy button: a Pill Button with the clipboard icon. One click copies the text of its Citation Card, or the text in data-copy-text when the button stands alone; for 1.8 seconds the pill turns green and shows a check with the word from data-label-copied. Label and success word are editable (Copy / Kopieren, Copied / Kopiert), the icons are fixed. Try it. | |
dck-round-icon-button --glyph-chevron-left | --glyph-chevron-right | --glyph-x | Round icon button, large (44 px): previous and next inside sliders and drawers, close. Colour: the third surface, the same as the Pill Button. Always give it an aria-label. | |
dck-round-icon-button --size-md --glyph-chevron-down | --glyph-chevron-up | Small version (36 px) with arrow down or up: expand and collapse a card or a drawer. | |
dck-round-icon-button--corner-merge-br | --corner-merge-bl | Round icon button that nestles into the bottom right or bottom left corner of a card: the merged corner takes the radius of the host card (--surf-radius), nothing is set on the button. Live hosts: drawer close on Masonry Grid, next tab of the section navigator. | |
| Text Button | ||
| Read More | dck-btn-text | Text only: the brand line draws under the text on hover and the arrow moves. Read more, show all, next step inside cards and intros (course cards and Sparks teasers on Fablab). |
The Canvas is licensed under Creative Commons.[...] You may copy, share and use it, privately and commercially, as long as you name the author. | show-more-inline / show-more-inline-block, marker [...] | Expand arrow: the text up to the marker [...] is shown, the arrow unfolds the rest smoothly, a second arrow folds it back. show-more-inline-block for paragraphs (licence text on the canvas pages, animated height), show-more-inline inside a sentence (fades in). Arrows and colour come from the theme, nothing else to write. |
| Form Buttons | ||
form-submit, button button--primary, webform-button--submit | Submit of Drupal and Webform forms: the Primary look, set sitewide. Nothing to add in the form. | |
button | Any other form button (Drupal class button): the Secondary look. For a quiet third action use dck-button dck-button--tertiary. | |
dck-button dck-button--tertiary dck-button--compact | Tertiary in the compact size: for forms that offer many options side by side, and for quiet extras like reset password on the Fablab login. | |
Empty Template
<!-- DCK Button: variant primary | secondary | tertiary | destructive | disabled; size compact | large | hero -->
<a class="dck-button dck-button--primary" href="/XXX"><span class="dck-button__label">XXX</span></a>
<button type="button" class="dck-button dck-button--secondary"><span class="dck-button__label">XXX</span></button>Frame Button
<a class="dck-btn-frame" href="/XXX"><span class="dck-button__label">XXX</span></a>Navigation Buttons
<a class="dck-btn-nav dck-btn-nav--left" href="/XXX"><span class="dck-button__label">Previous</span></a>
<a class="dck-btn-nav dck-btn-nav--right" href="/XXX"><span class="dck-button__label">Next</span></a>Text Button
<a class="dck-btn-text" href="/XXX">XXX</a>
<!-- Expand arrow: text before [...] stays visible, the rest unfolds -->
<span class="show-more-inline">XXX[...]XXX</span>
<div class="show-more-inline-block"><p>XXX[...]</p><p>XXX</p></div>Pill Button
<button type="button" class="pill-button">XXX</button>
<!-- With an icon: an svg of 1em in front of the label -->
<button type="button" class="pill-button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"></path></svg> XXX</button>
<!-- Copy button: inside a citation card it copies .citation-card__text; standalone it copies data-copy-text. Success word from data-label-copied -->
<button type="button" class="citation-card__copy" data-copy-text="XXX" data-label-copied="Copied"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg> Copy</button>
<!-- Overlay: any link or button with the class openmodal opens its target over the page -->
<a class="pill-button openmodal" href="/XXX">XXX</a>Round Icon Button
<!-- glyph: chevron-left | chevron-right | chevron-down | chevron-up | x; size: default lg (44 px), dck-round-icon-button--size-md (36 px); corner: --corner-merge-br | --corner-merge-bl -->
<button type="button" class="dck-round-icon-button dck-round-icon-button--glyph-chevron-right" aria-label="XXX"></button>Form Buttons
<!-- Submit = Primary look, plain button = Secondary look, many options = Tertiary compact -->
<button type="submit" class="form-submit">XXX</button>
<button type="button" class="button">XXX</button>
<button type="button" class="dck-button dck-button--tertiary dck-button--compact">XXX</button>