> For the complete documentation index, see [llms.txt](https://mariohernandez.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mariohernandez.gitbook.io/components/drupal-integrations/integrating-the-card-wide.md).

# Integrating the Card Wide

![Card Wide variant](/files/-M8CN4VLGZDuYPioWuTA)

In the previous exercise we used the default card component to display blog posts that are part of the **From our blog** section. In this exercise, you will use the **Card Wide** variant to style blog posts that are part of the **Featured Content** section. The process for achieving this is exactly as we did with the regular card in the previous exercise. Here are some things to note:

* In the previous exercise we used the **Teaser** view mode to create a custom twig template. In this exercise use the **Featured** view mode
* In order to achieve the Card Wide look, we need to pass a modifier class of `card--wide` when the component is integrated
* The card wide does not use `tags`, but it does use the `author` field
* Use the appropriate twig block for displaying the date, in **short** format. Remember, we created two twig blocks in the card component to determine where the date will be displayed depending on the card we are working with.
* Finally, the template suggestion you will need to create is `node--article--featured.html.twig`

## Full integration code

Here is what **node--article--featured.html.twig** looks like when the Card Wide is integrated.

```php
{# Sets variable to trigger content render array. #}

<div data-gb-custom-block data-tag="set"></div>

{#
Sets variable for article title to provide all
properties needed by the heading component (heading_level,
modifier, title, and url).
#}
{% set article_title = {
    "heading_level": 3,
    "modifier": "card__title",
    "title": label,
    "url": url
  }
%}

{#
Uses embed to be able to include card component
and make use of twig blocks found in such component.
#}
{% embed '@components_theme/card/card.twig' with
  {
    "attributes": attributes,
    "title_prefix": title_prefix,
    "title_suffix": title_suffix,
    "image": content.field_image is not empty ? content.field_image,
    "heading": article_title,
    "date": node.createdtime|date('M d'),
    "category": content.field_category|render|trim is not empty ? content.field_category,
    "body_text": content.body|render|trim is not empty ? content.body,
    "author": content.field_author,
    "modifier": 'card--wide'
  } only
%}

  {# Calls featured_date twig block.#}
  

<div data-gb-custom-block data-tag="block">

    {{ date }}
  

</div>

  {#
  Removes content from card_date twig block
  to avoid printing the date twice and in
  different places.
  #}
  

<div data-gb-custom-block data-tag="block">

  

</div>

  {# Calls author twig block.#}
  

<div data-gb-custom-block data-tag="block">

    {{ author }}
  

</div>

</div>

```

* Save the changes above and clear Drupal's cache
* Reload Drupal's homepage
* The Featured Content section rendered with the Card wide. But there seems to be a problem with the author information. Let's fix it next


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://mariohernandez.gitbook.io/components/drupal-integrations/integrating-the-card-wide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.