Overview

How to use

Documentation - Card

Package name:

fastn-community.github.io/gradient-business-card

License:

Open Source BSD

This is a card component which will render your data as a business card (front-view).

How to use

Add `gradient-business-card` dependency into your FASTN.ftd

-- fastn.dependency: fastn-community.github.io/gradient-business-card

Lang:

ftd

In `index.ftd` (or whichever file you want to add)

-- import: fastn-community.github.io/gradient-business-card as b-card

-- b-card.card: John Doe
title: Software Developer
company-name: John Doe Pvt. Ltd.
logo: $assets.files.assets.ipsum-logo.svg
contact-1: +91 12345 99999
contact-2: +91 12345 88888
email: john@johndoe.com
website: www.johndoe.com
address: 123, Block No. A-123, Times Square, Bangalore - 123456
company-slogan: If you can type you can code

Lang:

ftd

Preview

Hi i'm

John Doe

Software Developer

123, Block No. A-123, Times Square, Bangalore - 123456

john@johndoe.com

www.johndoe.com

+91 12345 99999

+91 12345 88888

Properties:

Below are details of all properties of `card` component.

`name`

{

type:

Caption (`required`)

}

It's used to define the person's name for your card component.

`title`

{

type:

String (`required`)

}

It's used to define the person's business title for your card component.

`company-name`

{

type:

String (`required`)

}

It's used to define the company name for your card component.

`logo`

{

type:

ftd.image-src (`optional`)

}

It's used to define the business logo for your card component.

`contact-1`

{

type:

String (`optional`)

}

It's used to define the person's primary contact number (phone number) for your card component.

`contact-2`

{

type:

String (`optional`)

}

It's used to define the person's alternative contact number (phone number) for your card component.

`email`

{

type:

String (`optional`)

}

It's used to define the person's email address for your card component.

`website`

{

type:

String (`optional`)

}

It's used to define any website for your card component.

`address`

{

type:

String (`optional`)

}

It's used to define the person's address for your card component.

`company-slogan`

{

type:

String (`optional`)

}

It's used to define the company slogan for your card component.

Some variants of card:

Let's see some variants of card if you omit providing some optional fields.

1- Removing `contact-2`

In `index.ftd` (or whichever file you want to add)

-- import: fastn-community.github.io/gradient-business-card as b-card

-- b-card.card: John Doe
title: Software Developer
company-name: John Doe Pvt. Ltd.
logo: $assets.files.assets.ipsum-logo.svg
contact-1: +91 12345 99999
email: john@johndoe.com
website: www.johndoe.com
address: 123, Block No. A-123, Times Square, Bangalore - 123456
company-slogan: If you can type you can code

Lang:

ftd

Hi i'm

John Doe

Software Developer

123, Block No. A-123, Times Square, Bangalore - 123456

john@johndoe.com

www.johndoe.com

+91 12345 99999

2- Removing `contact-1` and `contact-2`

In `index.ftd` (or whichever file you want to add)

-- import: fastn-community.github.io/gradient-business-card as b-card

-- b-card.card: John Doe
title: Software Developer
company-name: John Doe Pvt. Ltd.
logo: $assets.files.assets.ipsum-logo.svg
contact-1: +91 12345 99999
email: john@johndoe.com
website: www.johndoe.com
address: 123, Block No. A-123, Times Square, Bangalore - 123456
company-slogan: If you can type you can code

Lang:

ftd

Hi i'm

John Doe

Software Developer

123, Block No. A-123, Times Square, Bangalore - 123456

john@johndoe.com

www.johndoe.com

2- Removing `email`

In `index.ftd` (or whichever file you want to add)

-- import: fastn-community.github.io/gradient-business-card as b-card

-- b-card.card: John Doe
title: Software Developer
company-name: John Doe Pvt. Ltd.
logo: $assets.files.assets.ipsum-logo.svg
contact-1: +91 12345 99999
email: john@johndoe.com
website: www.johndoe.com
address: 123, Block No. A-123, Times Square, Bangalore - 123456
company-slogan: If you can type you can code

Lang:

ftd

Hi i'm

John Doe

Software Developer

www.johndoe.com

+91 12345 99999

+91 12345 88888

3- Removing `address`

In `index.ftd` (or whichever file you want to add)

-- import: fastn-community.github.io/gradient-business-card as b-card

-- b-card.card: John Doe
title: Software Developer
company-name: John Doe Pvt. Ltd.
logo: $assets.files.assets.ipsum-logo.svg
contact-1: +91 12345 99999
contact-2: +91 12345 88888
email: john@johndoe.com
website: www.johndoe.com
company-slogan: If you can type you can code

Lang:

ftd

Hi i'm

John Doe

Software Developer

null

john@johndoe.com

www.johndoe.com

+91 12345 99999

+91 12345 88888

4- Removing `company-slogan`

In `index.ftd` (or whichever file you want to add)

-- import: fastn-community.github.io/gradient-business-card as b-card

-- b-card.card: John Doe
title: Software Developer
company-name: John Doe Pvt. Ltd.
logo: $assets.files.assets.ipsum-logo.svg
contact-1: +91 12345 99999
contact-2: +91 12345 88888
email: john@johndoe.com
website: www.johndoe.com
address: 123, Block No. A-123, Times Square, Bangalore - 123456

Lang:

ftd

Hi i'm

John Doe

Software Developer

123, Block No. A-123, Times Square, Bangalore - 123456

john@johndoe.com

www.johndoe.com

+91 12345 99999

+91 12345 88888