Pages UI
Search…
Social Cards
Reusable card layouts to use in Social Feeds

Importing

First import it to your app module or any submodule as you wish
1
import { pgCardSocialModule } from '../@pages/components/card-social/card-social.module';
2
@NgModule({
3
imports: [pgCardSocialModule,...]
4
})
5
export class AppModule(){}
Copied!

How to use

Basic social card with text content
HTML
Typescript
1
<pgcardsocial
2
Type="text"
3
AdditionalClasses="col1"
4
Source="{{item.post.caption}}"
5
Timestamp="{{item.post.timestamp}}"
6
Author="{{item.author.name}}"
7
Activity="{{item.post.activity}}"
8
Location="{{item.post.location}}">
9
<ng-template #AuthorAvatar>
10
<img alt="Avatar" width="33" height="33" pgRetina src2x="{{item.author.avatar2x}}" src1x="{{item.author.avatar}}" src="{{item.author.avatar2x}}">
11
</ng-template>
12
<ng-template #CustomBody>
13
<p>{{item.post.body}}</p>
14
</ng-template>
15
</pgcardsocial>
Copied!
1
item = {
2
"author": {
3
"name" : "Jeff Curtis",
4
"avatar": "assets/img/profiles/8.jpg",
5
"avatar2x": "assets/img/profiles/8x.jpg"
6
},
7
"post" : {
8
"type": "text",
9
"location": "SF, California",
10
"activity": "Shared a Tweet",
11
"body": "What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. #quote",
12
"caption" : "via Twitter",
13
"image": "",
14
"timestamp": "few seconds ago",
15
"likes": "34", "comments": "456"
16
}
17
}
Copied!

Options

Option
Description
Types
Defaults
Activity
Use this to indicate activity that created the post. ex: 'Shared a photo'
String
null
AdditionalClasses
Pass any additional sibling classes that need to be appended with '.card'
String
null
Author
Author of the post
String
null
Body
Plain text body of the post
String
null
Comments
Comments count
String
null
Image
Image path
String
null
Likes
Likes count
String
null
Location
Location from where the post got shared
String
null
Source
Source of the post originated from a different source
String
null
Timestamp
Any pre-formatted time string
String
null
Title
To be used only with cards having Type="widget"
String
null
TitleClass
Any title formatting classes. (ex: text-success, text-danger)To be used only with cards having Type="widget"
String
text-complete
Type
Defines the layout of the card. Available options are widget, text, image and status
String
text

Templates

Option
Description
Defaults
#CustomBody
Pass any custom HTML elements.
null
#AuthorAvatar
Pass any image that should be used as profile image.
null