You are here

teaser.twig in Open Social 8.8

<div class="card teaser">

  <div class="teaser__image" >

    <div class="teaser__teaser-type">
      <svg class="teaser__teaser-type-icon">
        <use xlink:href="#icon-topic"></use>
      </svg>
    </div>

    <a href="#">
      <img src="kss-assets/teaser-1.jpg" alt="" class="img-responsive">
    </a>

  </div>

  <div class="teaser__body">
    <div class="teaser__content">

      <h4 class="teaser__title"> <a href="#">Teaser title</a></h4>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-account_circle"></use>
        </svg>
        <div class="teaser__content-text">
          <div class="teaser__published">
            <div class="teaser__published-date"> 29 Jan 2018 &bullet; </div>
            <div class="teaser__published-author">
              <a title="View user profile." href="#">Michelle Clark </a>
            </div>

          </div>
        </div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-event"></use>
        </svg>
        <div class="teaser__content-text">Blog</div>
      </div>

      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon">
          <use xlink:href="#icon-group"></use>
        </svg>
        <div class="teaser__content-text">Open Social Developers</div>
      </div>

    </div>

    <div class="card__actionbar">

      <a href="#" class="badge badge--pill badge-default teaser__badge">
        <span class="badge__container">
          <svg class="badge__icon">
              <use xlink:href="#icon-comment"></use>
            </svg>
            <span class="badge__label">6</span>
        </span>
      </a>

      <div class="badge teaser__badge" title="The visibility of this content is set to public">
        <svg class="badge__icon">
          <use xlink:href="#icon-public"></use>
        </svg>
      </div>

      <a href="#" class="card__link">Read more</a>
    </div>

  </div>


</div>

File

themes/socialbase/components/03-molecules/teaser/teaser.twig
View source
  1. <div class="card teaser">
  2. <div class="teaser__image" >
  3. <div class="teaser__teaser-type">
  4. <svg class="teaser__teaser-type-icon">
  5. <use xlink:href="#icon-topic"></use>
  6. </svg>
  7. </div>
  8. <a href="#">
  9. <img src="kss-assets/teaser-1.jpg" alt="" class="img-responsive">
  10. </a>
  11. </div>
  12. <div class="teaser__body">
  13. <div class="teaser__content">
  14. <h4 class="teaser__title"> <a href="#">Teaser title</a></h4>
  15. <div class="teaser__content-line">
  16. <svg class="teaser__content-type-icon">
  17. <use xlink:href="#icon-account_circle"></use>
  18. </svg>
  19. <div class="teaser__content-text">
  20. <div class="teaser__published">
  21. <div class="teaser__published-date"> 29 Jan 2018 &bullet; </div>
  22. <div class="teaser__published-author">
  23. <a title="View user profile." href="#">Michelle Clark </a>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="teaser__content-line">
  29. <svg class="teaser__content-type-icon">
  30. <use xlink:href="#icon-event"></use>
  31. </svg>
  32. <div class="teaser__content-text">Blog</div>
  33. </div>
  34. <div class="teaser__content-line">
  35. <svg class="teaser__content-type-icon">
  36. <use xlink:href="#icon-group"></use>
  37. </svg>
  38. <div class="teaser__content-text">Open Social Developers</div>
  39. </div>
  40. </div>
  41. <div class="card__actionbar">
  42. <a href="#" class="badge badge--pill badge-default teaser__badge">
  43. <span class="badge__container">
  44. <svg class="badge__icon">
  45. <use xlink:href="#icon-comment"></use>
  46. </svg>
  47. <span class="badge__label">6</span>
  48. </span>
  49. </a>
  50. <div class="badge teaser__badge" title="The visibility of this content is set to public">
  51. <svg class="badge__icon">
  52. <use xlink:href="#icon-public"></use>
  53. </svg>
  54. </div>
  55. <a href="#" class="card__link">Read more</a>
  56. </div>
  57. </div>
  58. </div>