Keyboard (KBD)

The keyboard component is used to visually represent a key on a keyboard.

Basic Example



= daisy_kbd do
  

Various Sizes

Preview

Shift Shift Shift Shift

Code

.my-2.flex.flex-row.gap-4.items-center
  = daisy_kbd(css: "kbd-lg") do
    Shift
  = daisy_kbd(css: "kbd-md") do
    Shift
  = daisy_kbd(css: "kbd-sm") do
    Shift
  = daisy_kbd(css: "kbd-xs") do
    Shift

Inside a Sentence

Preview

Press

to pay respects.

Code

.my-2.flex.flex-row.gap-2.items-center
  %p Press
  = daisy_kbd do
    F
  %p to pay respects.

Combined Keys

Preview

Ctrl + Alt + Del

Code

.my-2.flex.flex-row.gap-2.items-center
  = daisy_kbd do
    Ctrl

  +

  = daisy_kbd do
    Alt

  +

  = daisy_kbd do
    Del

Function Keys

Preview

⌘ ⌥ ⇧ ⌃

Code

.my-2.flex.flex-row.gap-4.items-center
  = daisy_kbd do
    ⌘

  = daisy_kbd do
    ⌥

  = daisy_kbd do
    ⇧

  = daisy_kbd do
    ⌃

Full Keyboard

Preview

tab q w e r t y u i o p [ ] \

caps lock a s d f g h j k l : ' return

shift z x c v b n m , . / shift

Code

%div
  .flex.justify-center.gap-1.my-1.w-full
    = daisy_kbd do
      tab
    = daisy_kbd do
      q
    = daisy_kbd do
      w
    = daisy_kbd do
      e
    = daisy_kbd do
      r
    = daisy_kbd do
      t
    = daisy_kbd do
      y
    = daisy_kbd do
      u
    = daisy_kbd do
      i
    = daisy_kbd do
      o
    = daisy_kbd do
      p
    = daisy_kbd do
      \[
    = daisy_kbd do
      \]
    = daisy_kbd do
      \\
  .flex.justify-center.gap-1.my-1.w-full
    = daisy_kbd do
      caps lock
    = daisy_kbd do
      a
    = daisy_kbd do
      s
    = daisy_kbd do
      d
    = daisy_kbd do
      f
    = daisy_kbd do
      g
    = daisy_kbd do
      h
    = daisy_kbd do
      j
    = daisy_kbd do
      k
    = daisy_kbd do
      l
    = daisy_kbd do
      \:
    = daisy_kbd do
      '
    = daisy_kbd do
      return

  .flex.justify-center.gap-1.my-1.w-full
    = daisy_kbd do
      shift
    = daisy_kbd do
      z
    = daisy_kbd do
      x
    = daisy_kbd do
      c
    = daisy_kbd do
      v
    = daisy_kbd do
      b
    = daisy_kbd do
      n
    = daisy_kbd do
      m
    = daisy_kbd do
      ,
    = daisy_kbd do
      \.
    = daisy_kbd do
      \/
    = daisy_kbd do
      shift

Made with by Profoundry .