Base UI

Social Cards
Angelica Suacana・48 m
@angelsuacana

Crafting seamless experiences, one pixel at a time—where every click feels like an invitation to magic in the digital realm 🚀 #UIUXMagic #DesignDaily

1,089 241
Sonya Stoltenberg・48 m
@sonyastolten

"Karangasem, Bali" #photography by Jord Hammond

1,089 241
Charles Quitzon・3 Okt 2023
@marcomel

Figma UI/UX Design Essentials. Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design.

skillshare.com Figma UI/UX Design Essentials

Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design...
1,089 241
Marco Melandri・48 m
@marcomel

I can't think of a blockchain outside of BTC and Ethereum (mayyybe Solana) that has more importance than Tezos to its users.

1,089 241
Documentation
Available Parameters
Parameter Type Description
author Author Object
required 		Set author details for social card.
Example:
{
    "avatar"     : "avatar-2.png",
    "name"       : "Angelica Suacana",
    "account"    : "@angelsuacana",

    "time"       : "48 m",
}
content Text
required 		Set content text of card body.
images Array of Text Filename Set list of card images.
The Value is name of image file in the src/assets/images/ folder.
sharedLink Shared Link Object Set shard link details for social card.
Example:
{
    "url"            : "skillshare.com",
    "title"          : "Figma UI/UX Design Essentials",
    "description"    : "Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design...",
}
leftActions Array of HTML Text Set list of link that will be displayed in the left side of card footer.
rightActions Array of HTML Text Set list of link that will be displayed in the right side of card footer.
Starter Kit Codes
Starter Kit Code 
 {# include components/card-social  #}
 {% include "../../components/card-social.twig", with {
    	"author"		: {
		"avatar"	: "avatar-2.png",
		"name"	: "Angelica Suacana",
		"account"	: "@angelsuacana",

		"time"	: "48 m",
	},

	"content"		: "Crafting seamless experiences, one pixel at a time—where every click feels like an invitation to magic in the digital realm 🚀 <a href=\"#\">#UIUXMagic</a> <a href=\"\">#DesignDaily</a>",

	"images"		: [
		"card-social-image-1.png",
	],

	"leftActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-heart\"></i> <span>1,089</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>241</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-paper-plane\"></i></a>",
	],
	"rightActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-bookmark\"></i></a>",
	]
 } %}
Starter Kit Code 
 {# include components/card-social  #}
 {% include "../../components/card-social.twig", with {
    	"author"		: {
		"avatar"	: "avatar-3.png",
		"name"	: "Sonya Stoltenberg",
		"account"	: "@sonyastolten",

		"time"	: "48 m",
	},

	"content"		: "\"Karangasem, Bali\" <a href=\"\">#photography</a> by Jord Hammond",

	"images"		: [
		"card-social-image-2.png",
		"card-social-image-3.png",
	],

	"leftActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-heart filled\"></i> <span>1,089</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>241</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-paper-plane\"></i></a>",
	],
	"rightActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-bookmark\"></i></a>",
	]
 } %}
Starter Kit Code 
 {# include components/card-social  #}
 {% include "../../components/card-social.twig", with {
    	"author"		: {
		"avatar"	: "avatar-1.png",
		"name"	: "Charles Quitzon",
		"account"	: "@marcomel",

		"time"	: "3 Okt 2023",
	},

	"content"		: "Figma UI/UX Design Essentials. Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design.",

	"sharedLink"	: {
		"url"		: "skillshare.com",
		"title"		: "Figma UI/UX Design Essentials",
		"description"	: "Use Figma to get a job in UI Design, User Interface, User Experience design, UX Design & Web Design...",
	},

	"leftActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-heart filled\"></i> <span>1,089</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>241</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-paper-plane\"></i></a>",
	],
	"rightActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-bookmark\"></i></a>",
	]
 } %}
Starter Kit Code 
 {# include components/card-social  #}
 {% include "../../components/card-social.twig", with {
    	"author"		: {
		"avatar"	: "avatar-4.png",
		"name"	: "Marco Melandri",
		"account"	: "@marcomel",

		"time"	: "48 m",
	},

	"content"		: "I can't think of a blockchain outside of BTC and Ethereum (mayyybe Solana) that has more importance than Tezos to its users.",

	"leftActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-heart\"></i> <span>1,089</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-chat\"></i> <span>241</span></a>",
		"<a href=\"javascript:void()\"><i class=\"ic ic-paper-plane\"></i></a>",
	],
	"rightActions"	: [
		"<a href=\"javascript:void()\"><i class=\"ic ic-bookmark filled\"></i></a>",
	]
 } %}