Clover Design System

Installation:

npm i clover-design-system

Configuration

Add the following to your main.js or main.ts Vue 3 project file for the styling.

import '/node_modules/clover-design-system/dist/style.css'

Usage

Grand Total of two working components!

<CdsButton> <CdsIcon>

Example

import { CdsButton } from 'clover-design-system'

Buttons

Buttons take the following props:

  disabled?: boolean
  loading?: boolean
  buttonText?: string
  loadingText?: string
  qa?: string
  variant?: string // 'primary' or 'secondary'
  size?: string // 'small', 'medium' or 'large'

Slots

text

icon

Icons

NOTE: Only two icons work: personal-info-icon and alt-house-svgrepo-com

Icons take the following props:

  icon: string // svg name without the .svg extension
  title: string
  size?: string // 'small', 'medium' or 'large'
  color?: string // doesn't work yet