> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/everyware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/everyware/starter-kit-packages/everyboard/teaser-templates.md).

# Teaser templates

When an article is displayed in a board, it will use what we call a "teaser template", these templates can be added in to the clients themes and then chosen in the board settings, widget settings and more.

A teaser template is added to the theme by adding a PHP file in `templates/` sub folder of the theme, a comment in the php file will then set the name of the template and make it accessible in Everyboard.

The PHP file will automatically get access to a PHP variable `$article` which is an object of type `OcArticle`. Another variable, `$args` (array), *may* be available and gives information about the context in which is it rendered. `$args` is always set in Everyboard but may not be available if teaser is rendered in a widget somewhere else.

## Example of template:

```php
<?php

/**
 * Article Name: List element
 */

use Customer\TeaserArticle;
use EwTools\Twig\View;

$teaser = TeaserArticle::createFromOcArticle( $article, $args ?? [] );

View::render( '@base/page/partials/teaser/teaser-list-element.twig', $teaser->getViewData() );
```

The php file will in this example use twig for the actual HTML-rendering as follows.

```php
<article class="article-teaser article-teaser--list-element">
    <div class="article-teaser__header">
        <h3 class="article-teaser__title{{ title_class ? ' '~title_class : '' }}">
                {{ title }}
        </h3>
    </div>
</article>
```

## Example of `$args`:

In this example Everyboard uses a framework with a 12-column grid, and the template is being rendered in a container that takes up 12 columns' width on the smallest screen, and 4 on larger screens.

```php
$args = [
    'max_cols' => 12,
    'content_sizes' => [
        'xs' => 12,
        'sm' => 4,
        'md' => 4,
        'lg' => 4
    ]
];
```