Base UI

Task Cards
Ongoing
UI Kit Template

Our Good brand is an immersive endeavor into the world of design excellence, meticulously ...

6 Tasks 2 3 30 Jan 2024
E
+3 more
Efficentrix Dashboard UI Kit
2 3 30 Jan 2024
E
Gestalt Principles of Design Design Design
Documentation
Available Parameters
Parameter Type Description
variation Text
required
Default : card-normal 		Set variation for Card Product component.
List of available variations :
  • card-normal
  • card-lg
  • card-file
badge Text Set badge of Task.
title Text
required 		Set title of Task.
content Text Set content or description of Task.
details Array of HTML Text Set list of link that will be displayed as Task details.
Example:
[
    "<a href=\"javascript:void()\"><i class=\"ic ic-check-square-offset\"></i> <span>6 Tasks</span></a>",
    "<a href=\"javascript:void()\"><i class=\"ic ic-link\"></i> <span>2</span></a>",
    "<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>3</span></a>",
    "<a href=\"javascript:void()\"><i class=\"ic ic-calendar-check\"></i> <span>30 Jan 2024</span></a>",
]
participants Array of Author Object Set list of participants of Task.
Example:
[
    {
        "image"        : "avatar-1.png",
    },
    {
        "image"        : "avatar-2.png",
    },
    {
        "initial"    : "E"
    },
    {
        "image"        : "avatar-1.png",
    }
]
percentage Number Set percentage of Task progress.
image Text Filename
Available for : card-file 		Set Task image for variation : card-file.
The Value is name of image file in the src/assets/images/ folder.
Starter Kit Codes
Starter Kit Code 
 {# include components/card-task  #}
 {% include "../../components/card-task.twig", with {
    	"variation"	: "card-lg",

	"badge"		: "<span class=\"badge rounded-pill text-bg-brand-primary-1\">Ongoing</span>",

	"title"		: "UI Kit Template",

	"content"		: "Our Good brand is an immersive endeavor into the world of design excellence, meticulously ...",

	"details"		: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-check-square-offset\"></i> <span>6 Tasks</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-link\"></i> <span>2</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>3</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-calendar-check\"></i> <span>30 Jan 2024</span></a>",
	],

	"participants"	: [
		{
			"image"		: "avatar-1.png",
		},
		{
			"image"		: "avatar-2.png",
		},
		{
			"initial"		: "E"
		},
		{
			"image"		: "avatar-1.png",
		},
		{
			"image"		: "avatar-2.png",
		},
		{
			"image"		: "avatar-2.png",
		}
	],

	"percentage"	: 25
 } %}
Starter Kit Code 
 {# include components/card-task  #}
 {% include "../../components/card-task.twig", with {
    	"variation"	: "card-normal",

	"title"		: "Efficentrix Dashboard UI Kit",

	"details"		: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-link\"></i> <span>2</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>3</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-calendar-check\"></i> <span>30 Jan 2024</span></a>",
	],

	"participants"	: [
		{
			"image"		: "avatar-1.png",
		},
		{
			"image"		: "avatar-2.png",
		},
		{
			"initial"		: "E"
		},
		{
			"image"		: "avatar-1.png",
		}
	]
 } %}
Starter Kit Code 
 {# include components/card-task  #}
 {% include "../../components/card-task.twig", with {
    	"variation"	: "card-file",

	"title"		: "<i class=\"ic ic-file-pdf\"></i> Gestalt Principles of Design Design Design ",

	"image"		: "card-task-image-1.png"
 } %}