Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

DownloadCard

title

string

required

Title

subtitle

string

required

Subtitle

iconLeft

Icon to be displayed on the left

iconColor

string | undefined

#627282

Icon Color

DownloadCard

<MobileScreen isWhite>
  <DpDownloadCard title="title" subtitle="subtitle" />
</MobileScreen>

<MobileScreen isWhite>
  <DpDownloadCard title="title" subtitle="subtitle" />
</MobileScreen>

DownloadCard With left icon

<MobileScreen isWhite>
  <DpDownloadCard
    title="title"
    subtitle="subtitle"
    iconLeft={DpIcons.ContentFileText}
  />
</MobileScreen>

<MobileScreen isWhite>
  <DpDownloadCard
    title="title"
    subtitle="subtitle"
    iconLeft={DpIcons.ContentFileText}
  />
</MobileScreen>

Variations

<MobileScreen isWhite>
  <DpDownloadCard title="Sick Leave" subtitle="SL-10122021.pdf" />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFilePdf}
    iconColor={palette.blue}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.excel"
    iconLeft={DpIcons.ContentExcel}
    iconColor={palette.turquoise}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFilePdf}
    iconColor={palette.yellow}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFilePdf}
    iconColor={palette.red}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFileImage}
    iconColor={palette.purple}
  />
</MobileScreen>

<MobileScreen isWhite>
  <DpDownloadCard title="Sick Leave" subtitle="SL-10122021.pdf" />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFilePdf}
    iconColor={palette.blue}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.excel"
    iconLeft={DpIcons.ContentExcel}
    iconColor={palette.turquoise}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFilePdf}
    iconColor={palette.yellow}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFilePdf}
    iconColor={palette.red}
  />
  <DpSpacer />
  <DpDownloadCard
    title="Sick Leave"
    subtitle="SL-10122021.pdf"
    iconLeft={DpIcons.ContentFileImage}
    iconColor={palette.purple}
  />
</MobileScreen>

Docplanner Mobile UI

DownloadCard

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}DownloadCard

DownloadCard With left icon

Variations

DownloadCard