edge-components

Dropdown: Card 

<div class="dropdown">
    <label tabindex="0" class="btn m-1">dropdown card</label>
    <div class="card card-compact dropdown-content w-64 p-2 shadow bg-primary text-primary-content">

        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p>you can use any element as a dropdown.</p>
        </div>

    </div>
</div>
 
@jrmc.dropdown({ text: 'dropdown card' })
  @jrmc.card({ class: 'card-compact dropdown-content w-64 p-2 shadow bg-primary text-primary-content' })
    @jrmc.card.body()
      @!jrmc.card.title({ as: 'h3', text: 'Card title' })
      <p>you can use any element as a dropdown.</p>
    @end
  @end
@end

Dropdown

Doc : daisyui dropdown

Dropdown can open a menu or any other element when the button is clicked.

Class name Type
dropdown Component Container element
dropdown-content Component Container for content
dropdown-end Modifier Aligns to end
dropdown-top Modifier Open from top
dropdown-left Modifier Open from left
dropdown-right Modifier Open from right
dropdown-hover Modifier Opens on hover too
dropdown-open Modifier Force open