> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/shared-blocks/blog-card.md).

# Blog card

Settings from the current block help to modify the Blog cards.

## Blog card

### Content

**Alignment**\
Choose how titles are aligned: Left or Center.

**Heading size**\
Set the title size on desktop (15–24 px).

### Image

Use the '**Aspect ratio**' drop-down to choose the shape of images:

* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

### Attributes

> *Required steps:*
>
> 1. Ensure to set up settings in *Shopify admin -> Content -> Blog posts* to display specific content.
> 2. Turn on or off the options to display the desired content in the blog cards.

**Date**\
Set the visibility date in your admin.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FvgPZ8k4xj7xdCa8aYScM%2Fadmin_blog%20posts%20date.png?alt=media&amp;token=05447f8a-ebc2-43a5-8512-8bd1e93d168b" alt=""><figcaption></figcaption></figure>

**Author**\
Assign an author name in the corresponding field.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FnZPndGOHEpyMPxZ80hEY%2Fadmin_blog%20posts%20author.png?alt=media&amp;token=a285a203-e2b4-4b4e-b8e5-ce5417fb8867" alt=""><figcaption></figcaption></figure>

**Comments**\
To display comments in blog cards, enable comments in *Shopify admin -> Content -> Blog posts -> Manage blogs*.

**Tags**\
Add the list of tags for each article.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FbGhsASvGgIqTgtf59ynF%2Fadmin_blog%20posts%20tags.png?alt=media&amp;token=c89156c7-6633-43f3-bb1e-6be0a535b731" alt=""><figcaption></figcaption></figure>

**Excerpt**\
Write a summary of the post per article.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FVbaH1KJe5cBtpxkwUFgb%2Fadmin_blog%20posts%20excerpt.png?alt=media&amp;token=28e1b54a-5846-49c3-96e6-463ed2c809ae" alt=""><figcaption></figcaption></figure>

**Excerpt length (characters)**\
Set how many characters are shown in the summary (20–520).

**Read more button**\
Displays a button on hover, below the content.

**Style**

{% hint style="info" %}
If no colors are set in the corresponding section, the button uses the default styles defined in *Theme settings ->* [*<mark style="color:$primary;">Colors</mark>*](/triumph/theme-settings/theme-settings.md#colors).
{% endhint %}

Choose the button appearance:

**Primary / Secondary**\
Uses the default button styles set in your theme (solid or outline).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FRmDhS1NIcQ4YkxKILxpW%2Fblog%20posts_blog%20card%20bttn.png?alt=media&amp;token=d07d1e00-63ce-4b14-9f0e-33058fd0e4c5" alt=""><figcaption></figcaption></figure>

### Colors

**Text**\
Set the color of the blog card text.

**Link hover**\
Set the title color when hovered.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FL9rtNxBF6mNECuakGCZm%2Fblog%20posts_blog%20card%20colors.png?alt=media&amp;token=a399221a-95f6-4e02-ace4-c0936db273e5" alt=""><figcaption></figcaption></figure>

### Hover card colors

Enable '**Change colors on hover**' to customize the card appearance on hover:

* **Hover background**\
  Sets the background color of an active card.
* **Text**\
  Changes the color of all text.
* **Link item**\
  Sets the title color on hover.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FaoIDpKq3CeaaDDb68El1%2Fblog%20posts_blog%20card%20hover%20colors.png?alt=media&amp;token=f1cdf7f4-b6ba-453e-8c05-f5480288272d" alt=""><figcaption></figcaption></figure>

### Button colors <a href="#button-colors" id="button-colors"></a>

{% hint style="success" %}
Available color settings depend on the selected button style above.
{% endhint %}

Use these settings to customize a solid button:

* **Background / Background gradient** – Set the button background color.
* **Border** – Add or adjust the border color.
* **Text** – Set the button text color.

Hover state:

* **Hover background / Hover background gradient** - Background color on hover.
* **Hover border** - Border color on hover.
* **Hover text** - Text color on hover.