HiVolda Styleguide

Content Teaser: Article Page 

<article class="search-result search-result--page search-result--trimmed">
    <div class="search-result__wrapper">
        <div class="search-result__content-wrapper">
            <h2 class="search-result__heading"><a href="#">Heading Example</a></h2>

            <div class="search-result__content">
                <div class="search-result__breadcrumbs">
                    <div class="search-result__breadcrumbs__meta">
                        <a class="search-result__link" href="#">
                            <span class="search-result__breadcrumbs__logo"></span>
                        </a>

                        <span class="search-result__breadcrumbs__dots">...</span>

                    </div>

                    <div class="search-result__breadcrumbs__link-wrapper">
                        <div class="search-result__breadcrumbs__icon"><span class="icon-chevron-right"></span></div>
                        <div class="search-result__breadcrumbs__link">

                            <a href="#">Example location 1</a>

                        </div>
                    </div>

                    <div class="search-result__breadcrumbs__link-wrapper">
                        <div class="search-result__breadcrumbs__icon"><span class="icon-chevron-right"></span></div>
                        <div class="search-result__breadcrumbs__link">

                            <a href="#">Example location 2</a>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</article>
 
<{{ element }} class="search-result search-result--page search-result--trimmed">
<div class="search-result__wrapper">
  <div class="search-result__content-wrapper">
    <h2 class="search-result__heading"><a href="#">{{ heading }}</a></h2>

    <div class="search-result__content">
      <div class="search-result__breadcrumbs">
        <div class="search-result__breadcrumbs__meta">
          <a class="search-result__link" href="#">
            <span class="search-result__breadcrumbs__logo"></span>
          </a>
          {% if breadcrumbs.is_trimmed %}
            <span class="search-result__breadcrumbs__dots">...</span>
          {% endif %}
        </div>

        {% for link in breadcrumbs.links %}
          <div class="search-result__breadcrumbs__link-wrapper">
            <div class="search-result__breadcrumbs__icon"><span class="icon-chevron-right"></span></div>
            <div class="search-result__breadcrumbs__link">
              {% if breadcrumbs.is_empty %}
                <span>{{ link }}</span>
              {% else %}
                <a href="#">{{ link }}</a>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>

  </div>
</div>
</{{ element }}>
 
{
  "element": "article",
  "title": "Verdifull boksamling fra Volda",
  "date": "09. januar 2017",
  "datetime": "2017-01-09",
  "desc": "Ehenet mod que porum in nimodis as am qui que sam si occum audae volorit exerum am repudisse nisquid maio",
  "src": "https://cldup.com/3EsQuKhX2a.png",
  "alt": "Image description",
  "href": "http://testlenke.no",
  "heading": "Heading Example",
  "breadcrumbs": {
    "is_trimmed": true,
    "is_empty": false,
    "links": [
      "Example location 1",
      "Example location 2"
    ]
  }
}
  • Handle: @module-content-teaser--article-page
  • Preview:
  • Filesystem Path: source/patterns/03-modules/content-teaser--article-page.twig

No notes defined.