> 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