%article
  %header
    %h1 Teaser Card
    %a{ href: '/styleguide/' } Back to Index
  %hr
  %aside.teaser.teaser--card
    .teaser__container
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')
      %section.teaser__item
        %a.teaser__link{ href: '#'}
          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
          .teaser__content
            %h3 Produkt oder Bereich
            %p Preis 12 CHF oder ein Produkt Eigenschaft
            %button.btn.btn--tertiary.teaser__btn Kaufen
        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
          - streusel_icon( 'download')