# Social Cards

## Importing

First import it to your app module or any submodule as you wish

```typescript
import { pgCardSocialModule } from '../@pages/components/card-social/card-social.module';
@NgModule({
  imports: [pgCardSocialModule,...]
})
export class AppModule(){}
```

## How to use 

Basic social card with text content 

{% tabs %}
{% tab title="HTML" %}

```markup
<pgcardsocial 
    Type="text"
    AdditionalClasses="col1"
    Source="{{item.post.caption}}"
    Timestamp="{{item.post.timestamp}}"
    Author="{{item.author.name}}"
    Activity="{{item.post.activity}}"
    Location="{{item.post.location}}">
    <ng-template #AuthorAvatar>
        <img alt="Avatar" width="33" height="33" pgRetina src2x="{{item.author.avatar2x}}" src1x="{{item.author.avatar}}" src="{{item.author.avatar2x}}">
    </ng-template>
    <ng-template #CustomBody>
        <p>{{item.post.body}}</p>
    </ng-template>
</pgcardsocial>
```

{% endtab %}

{% tab title="Typescript" %}

```typescript
item = { 
    "author": { 
        "name" : "Jeff Curtis", 
        "avatar": "assets/img/profiles/8.jpg", 
        "avatar2x": "assets/img/profiles/8x.jpg" 
    }, 
    "post" : { 
        "type": "text", 
        "location": "SF, California", 
        "activity": "Shared a Tweet",
        "body": "What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. #quote", 
        "caption" : "via Twitter", 
        "image": "", 
        "timestamp": "few seconds ago", 
        "likes": "34", "comments": "456" 
    } 
}
```

{% endtab %}
{% endtabs %}

## Options&#x20;

| 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&#x20;

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pages.revox.io/angular/ui-components/social-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.