> 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/card-component/author-component.md).

# Author component

As we just saw, the Card wide variant uses some information from the article author. We don't have a component for users or authors so we need to quickly build one.

1. Inside `src/patterns/components` create a new folder called **author**
2. Inside the *author* folder create **author.json**, **author.twig**, **author.scss**
3. Add the code below to each of the respective files

{% tabs %}
{% tab title="author.json" %}

```php
{
  "author": {
    "photo": "<img src='https://source.unsplash.com/_cvwXhGqG-o/100x100' alt='Author's headshot' />",
    "name": "Valentina De Leon",
    "title": "Digital Strategist"
  }
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="author.twig" %}

```php
{{ attach_library('training_theme/author') }}

<div class="author{{ modifier ? ' ' ~ modifier }}
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>
  <div class="author__meta">
    <div class="author__name">{{ author.name }}</div>
    <div class="author__title">{{ author.title }}</div>
  </div>
  <div class="author__photo">{{ author.photo }}</div>
</div>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="author.scss" %}

```css
// Import site utilities
@import '../../global/utils/init';

.author {
  align-items: center;
  color: $color-gray-dark;
  display: flex;
  flex-direction: row;
  font-size: 1.3rem;
  height: 70px;
}

.author__photo {
  height: 70px;
  width: 70px;

  img {
    border-radius: 50%;
  }
}

.author__meta {
  text-align: right;
  padding-right: 10px;
}

.author__name {
  text-align: right;
  text-transform: uppercase;
}

.author__title {
  font-style: italic;
}

```

{% endtab %}
{% endtabs %}

* Create the **author** library in `training_theme.libraries.yml`.

### Update the Card component with new Author component

Let's update the card component so we make use of the newly built Author component.

1. Edit `card.twig` by replacing the current code for author information with the code below:

{% tabs %}
{% tab title="card.twig" %}

```php

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

  

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

    {%
      include '@training_theme/author/author.twig' with {
        "author": author
      } only
    %}
  

</div>

</div>

```

{% endtab %}
{% endtabs %}

1. Rebuild your theme by running

```
npm run build && npm run watch
```

Windows users may need to run the two commands above separately (`npm run build` then `npm run watch`

### Full Card code

{% tabs %}
{% tab title="card.twig" %}

```php
{{ attach_library('training_theme/card') }}

<article class="card{{ modifier ? ' ' ~ modifier }}
  {{- attributes ? ' ' ~ attributes.class -}}"
  {{- attributes ? attributes|without(class) -}}>

  {# Date for featured content cards. #}
  

<div data-gb-custom-block data-tag="if" data-0='card--wide'>

    <div class="card__featured--date">
      

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

        {{ date }}
      

</div>

    </div>
  

</div>

  

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

    <div class="card__media">
      {{ image }}
    </div>
  

</div>

  <div class="card__content">
    

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

      {{ title_prefix }}
      {%
        include '@training_theme/heading/heading.twig' with {
          heading: heading
        } only
      %}
      {{ title_suffix }}
    

</div>

    {# Date for regular content cards. #}
    

<div data-gb-custom-block data-tag="if" data-0='card--wide'>

      <div class="eyebrow card__date">
        

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

          {{ date }}
        

</div>

      </div>
    

</div>

    

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

      <div class="eyebrow card__category">
        {{ category }}
      </div>
    

</div>

    

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

      <div class="card__body">
        {{ body_text }}
      </div>
    

</div>

    

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

      

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

        <ul class="tags">
          

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

            <li class="tag__item">
              <a href="{{ item.url }}" class="tag__link">
                {{ item.name }}
              </a>
            </li>
          

</div>

        </ul>
      

</div>

    

</div>

    

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

      

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

        {%
          include '@training_theme/author/author.twig' with {
            "author": author
          } only
        %}
      

</div>

    

</div>

  </div>
</article>
```

{% endtab %}
{% endtabs %}