Base UI
Product Cards
Graphic Design Masterclass - Learn GREAT Design
The Ultimate Graphic Design Course Which Covers Photoshop, Illustrator, InDesign, Design Theory, Branding & Logo Design
$17,00 $23,00
Adobe Illustrator CC - Essentials Training Course
$17,00 $23,00
Figma UI/UX Design Essentials
Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design
11,344 students ・1h 30m
$13,00 $24,00
Documentation
Available Parameters
| Parameter | Type | Description |
|---|---|---|
size
|
Text
required |
Set size for Card Product component. List of available variations :
|
image
|
Text Filename
required |
Set Product image. The Value is name of image file in the src/assets/images/ folder. |
title
|
Text
required |
Set title of Product. |
content
|
Text | Set content or description of Product. |
author
|
Text
required |
Set author name of Product. |
rating
|
Rating Object | Set rating details for Product. Example: {
|
details
|
Text | Set details of Product. |
price
|
Price Object
required |
Set price details for Product. Example: {
|
Starter Kit Codes
Starter Kit Code
{# include components/card-product #}
{% include "../../components/card-product.twig", with {
"size" : "large",
"image" : "card-product-image-1.png",
"title" : "Graphic Design Masterclass - Learn GREAT Design",
"content" : "The Ultimate Graphic Design Course Which Covers Photoshop, Illustrator, InDesign, Design Theory, Branding & Logo Design",
"author" : "by Lionel Richie",
"rating" : {
"score" : 4.8,
"description" : "(1,034 Reviews)",
},
"price" : {
"regular" : "$23,00",
"sale" : "$17,00",
}
} %}
Starter Kit Code
{# include components/card-product #}
{% include "../../components/card-product.twig", with {
"size" : "medium",
"image" : "card-product-image-3.png",
"title" : "Figma UI/UX Design Essentials",
"content" : "Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design",
"author" : "by Lionel Richie",
"rating" : {
"score" : 4.8,
"description" : "(12,170 Reviews)",
},
"details" : "11,344 students ・1h 30m",
"price" : {
"regular" : "$24,00",
"sale" : "$13,00",
}
} %}
Starter Kit Code
{# include components/card-product #}
{% include "../../components/card-product.twig", with {
"size" : "small",
"image" : "card-product-image-2.png",
"title" : "Adobe Illustrator CC - Essentials Training Course",
"content" : false,
"author" : "by Lionel Richie",
"rating" : {
"score" : 4.8,
"description" : "(1,034 Reviews)",
},
"price" : {
"regular" : "$23,00",
"sale" : "$17,00",
}
} %}