Social Cards

Pages UI
Search…
Pages UI
v5.0.1 - Pages Angular
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
​
UI Components - Previous
Cards
Next - UI Components
Collapse
Last modified 4yr ago
Copy link
Contents