partystreusel 1.1.1 → 1.2.0

data/styleguide/source/styleguide/content.html.haml

@@ -0,0 +1,20 @@
+%article
+  %header
+    %h1 CONTENT
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %pre A section with class .sc-content (max-width 780px). A paragraph with class .sc-lead
+  %section.sc-content
+    %h1 Lorem ipsum dolor sit amet
+    %p.sc-lead
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %p
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+    %h2 Lorem ipsum dolor sit amet
+    %p
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  %hr
+  %section.sc-content
+    %h2 Lorem ipsum dolor sit amet
+    %p
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

data/styleguide/source/styleguide/dropdowns.html.haml

@@ -0,0 +1,30 @@
+%article
+  %header
+    %h1 Buttons
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section
+    .dropdown
+      %button.btn.js-dropdown__toggler{ href: '#', id: 'dropdownMenu1'} Dropdown Button
+      %ul.dropdown__menu{ role: 'menu', :'aria-labelledby' => 'dropdownMenu1'}
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Action
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Another action
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Something else here
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Separated link
+
+  %section
+    .dropdown.dropdown--open
+      %button.btn.btn--active.js-dropdown__toggler{href: '#', id: 'dropdownMenu1'} Dropdown Button
+      %ul.dropdown__menu{ role: 'menu', :'aria-labelledby' => 'dropdownMenu1'}
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Action
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Another action
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Something else here
+        %li{ role: 'presentation'}
+          %a{ role: 'menuitem', href: '#'} Separated link

data/styleguide/source/styleguide/embeds.html.haml

@@ -0,0 +1,12 @@
+%article
+  %header
+    %h1 Embeds
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %pre .embeds class and .embeds--widescreen
+  .embeds.embeds--widescreen
+    %iframe{allowfullscreen: "", frameborder: "0", height: "720", mozallowfullscreen: "", src: "https://player.vimeo.com/video/27246366?color=ffffff", webkitallowfullscreen: "", width: "1280"}
+
+  %hr
+  .embeds.embeds--widescreen
+    %iframe{allowfullscreen: "", frameborder: "0", height: "720", src: "https://www.youtube.com/embed/A3PDXmYoF5U", width: "1280"}

data/styleguide/source/styleguide/form.html.haml

@@ -0,0 +1,71 @@
+%article
+  %header
+    %h1 BASE FORM STYLES
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.sc-content
+    %form
+      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
+      %p
+        %label{ for: 'input1'} Label 1
+        %input{ id: 'input1', type: 'text', name: 'input1', placeholder: 'input1 placeholder'}
+      %p
+        %label{ for: 'input2'} Label 2
+        %input{ id: 'input2', type: 'text', name: 'input2', placeholder: 'input2 placeholder', value: 'Input ausgefüllt'}
+      %p.form--field-error
+        %label{ for: 'input2'} Label Error Invalid entry
+        %input{ id: 'input2', type: 'text', name: 'input2', placeholder: 'input2 placeholder', value: 'Input ausgefüllt'}
+  %hr.sc-hr-alternate
+  %section.sc-content
+    %form
+      %p.form--horizontal
+        %label{ for: 'input1'} Label 1
+        %input{ id: 'input1', type: 'text', name: 'input1', placeholder: 'input1 placeholder'}
+      %p.form--horizontal
+        %label{ for: 'select1'} Label
+        %select{ id: 'select1' }
+          %option{ value: "husker"} Husker
+          %option{ value: "starbuck"} Starbuck
+          %option{ value: "hotdog"} Hot Dog
+          %option{ value: "apollo"} Apollo
+  %hr.sc-hr-alternate
+  %section.sc-content
+    %form
+      %fieldset
+        %legend Fieldset Legend Titel 1
+        %p
+          %label{ for: 'input1'} Label 1
+          %input{ id: 'input1', type: 'text', name: 'input1', placeholder: 'input1 placeholder'}
+        %p
+          %label{ for: 'input2'} Label 2
+          %input{ id: 'input2', type: 'text', name: 'input2', placeholder: 'input2 placeholder', value: 'Input ausgefüllt'}
+      %fieldset
+        %legend Fieldset Legend Titel 2
+        %p
+          %label{ for: 'input1'} Label 1
+          %input{ id: 'input1', type: 'text', name: 'input1', placeholder: 'input1 placeholder'}
+        %p
+          %label{ for: 'input2'} Label 2
+          %input{ id: 'input2', type: 'text', name: 'input2', placeholder: 'input2 placeholder', value: 'Input ausgefüllt'}
+      %fieldset
+        %legend Inputs with Buttons
+        %p
+          %label{ for: 'input1'} Label 1
+          %span.input-addon
+            %input.input-addon__field{ id: 'input1', type: 'text', name: 'input1', placeholder: 'input1 placeholder'}
+            %button.btn.input-addon__item{href: '#'} Search
+
+        %p.input-overlay
+          %label{ for: 'input2'} Label 2
+          %input.input-overlay__input{ id: 'input2', type: 'search', name: 'input2', placeholder: 'input2 placeholder'}
+          %button.btn.btn--icon.input-overlay__button{href: '#'}
+            - streusel_icon( 'search')
+      %fieldset
+        %legend Select
+        %p
+          %label{ for: 'select1'} Label
+          %select{ id: 'select1' }
+            %option{ value: "husker"} Husker
+            %option{ value: "starbuck"} Starbuck
+            %option{ value: "hotdog"} Hot Dog
+            %option{ value: "apollo"} Apollo

data/styleguide/source/styleguide/iconbar.html.haml

@@ -0,0 +1,34 @@
+%article
+  %header
+    %h1 IconBar
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %nav.iconbar{role: 'navigation'}
+    %ul.iconbar__list
+      %li.iconbar__item
+        %a{ href: '#'}
+          - streusel_icon( 'folder')
+          Photo
+      %li.iconbar__item.iconbar__item--active
+        %a{ href: '#'}
+          - streusel_icon( 'folder')
+          TechSpec
+      %li.iconbar__item
+        %a{ href: '#'}
+          - streusel_icon( 'folder')
+          Articles
+      %li.iconbar__item
+        %a{ href: '#'}
+          - streusel_icon( 'folder')
+          Favorites
+      %li.iconbar__item
+        %a{ href: '#'}
+          - streusel_icon( 'folder')
+          Links
+      %li.iconbar__item
+        %a{ href: '#'}
+          - streusel_icon( 'folder')
+          Documents
+
+  %hr.sc-hr-alternate
+

data/styleguide/source/styleguide/icons.html.haml

@@ -0,0 +1,67 @@
+%article
+  %header
+    %h1 Icons
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.sc-content
+    %p.sc-lead
+      %strong This file is generated by Grunt.JS task. Don't change this file!
+      %br
+      %br
+      Use the following helper to include a icon:
+    %pre - streusel_icon( 'NAME' )
+    %p.sc-lead
+      Use the modifier classes "icon--m" & "icon--l" for different sizes:
+    %pre - streusel_icon( 'NAME', 'icon--m')
+
+    %hr
+    
+    %div
+      %pre
+        %code arrow-left
+      - streusel_icon( 'arrow-left')
+      - streusel_icon( 'arrow-left', 'icon--m')
+      - streusel_icon( 'arrow-left', 'icon--l')
+    %hr
+    %div
+      %pre
+        %code arrow-right
+      - streusel_icon( 'arrow-right')
+      - streusel_icon( 'arrow-right', 'icon--m')
+      - streusel_icon( 'arrow-right', 'icon--l')
+    %hr
+    %div
+      %pre
+        %code close
+      - streusel_icon( 'close')
+      - streusel_icon( 'close', 'icon--m')
+      - streusel_icon( 'close', 'icon--l')
+    %hr
+    %div
+      %pre
+        %code download
+      - streusel_icon( 'download')
+      - streusel_icon( 'download', 'icon--m')
+      - streusel_icon( 'download', 'icon--l')
+    %hr
+    %div
+      %pre
+        %code folder
+      - streusel_icon( 'folder')
+      - streusel_icon( 'folder', 'icon--m')
+      - streusel_icon( 'folder', 'icon--l')
+    %hr
+    %div
+      %pre
+        %code menu
+      - streusel_icon( 'menu')
+      - streusel_icon( 'menu', 'icon--m')
+      - streusel_icon( 'menu', 'icon--l')
+    %hr
+    %div
+      %pre
+        %code search
+      - streusel_icon( 'search')
+      - streusel_icon( 'search', 'icon--m')
+      - streusel_icon( 'search', 'icon--l')
+    %hr

data/styleguide/source/styleguide/image.html.haml

@@ -0,0 +1,17 @@
+%article
+  %header
+    %h1 CONTENT
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+
+  %pre image without caption = img tag
+  .image
+    %img{ src: 'http://placevaughnandfranco.it/img/1200/800'}
+
+  %hr
+
+  %pre image with caption = figure with figcaption
+  %figure.image
+    %img{ src: 'http://placevaughnandfranco.it/img/1200/800'}
+    %figcaption.image__caption
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore

data/styleguide/source/styleguide/index.html.haml

@@ -0,0 +1,6 @@
+%article
+  %header
+    %h1 STYLEGUIDE PAGES
+  %hr
+  %section.styleguide-nav
+    = render 'partials/offcanvas_nav'

data/styleguide/source/styleguide/linklist.html.haml

@@ -0,0 +1,47 @@
+%article
+  %header
+    %h1 LINKLIST
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+
+  .links
+    %ul.links__list
+      %li.links__item
+        %a.links__link{ href: '#'}
+          .btn.btn--icon
+            - streusel_icon( 'download')
+          .links__text
+            Media Pressrelease
+            %small 132KB / jpg - free to use
+
+      %li.links__item
+        %a.links__link{ href: '#'}
+          .btn.btn--icon
+            - streusel_icon( 'download')
+          .links__text
+            Media Pressrelease
+            %small 132KB / jpg - free to use
+
+      %li.links__item
+        %a.links__link{ href: '#'}
+          .btn.btn--icon
+            - streusel_icon( 'download')
+          .links__text
+            Media Pressrelease
+            %small 132KB / jpg - free to use
+
+      %li.links__item
+        %a.links__link{ href: '#'}
+          .btn.btn--icon
+            - streusel_icon( 'download')
+          .links__text
+            Media Pressrelease
+            %small 132KB / jpg - free to use
+
+      %li.links__item
+        %a.links__link{ href: '#'}
+          .btn.btn--icon
+            - streusel_icon( 'download')
+          .links__text
+            Media Pressrelease
+            %small 132KB / jpg - free to use

data/styleguide/source/styleguide/options.html.haml

@@ -0,0 +1,28 @@
+%article
+  %header
+    %h1 Options (radio/checkbox)
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.sc-content
+    %form
+      %input{ type: 'radio', name: 'dummy', id: 'radio1' }
+      %label{ for: 'radio1' }
+        %i
+        Label for Radio 1
+      %input{ type: 'radio', name: 'dummy', id: 'radio2' }
+      %label{ for: 'radio2' }
+        %i
+        Label for Radio 2
+  %hr.sc-hr-alternate
+  %section.sc-content
+    %form
+      %input{ type: 'checkbox', id: 'checkbox1' }
+      %label{ for: 'checkbox1' }
+        %i
+        Label for Checkbox 1
+
+      %input{ type: 'checkbox', id: 'checkbox2' }
+      %label{ for: 'checkbox2' }
+        %i
+        Label for Checkbox 2
+

data/styleguide/source/styleguide/readmore.html.haml

@@ -0,0 +1,21 @@
+%article
+  %header
+    %h1 CONTENT
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %pre sc-content with readmore
+  %section.sc-content
+    %h2 Lorem ipsum dolor sit amet
+    %p
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %div.js-readmore.readmore
+      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+  %hr
+  %pre sc-content with readmore open
+  %section.sc-content
+    %h2 Lorem ipsum dolor sit amet
+    %p
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %div.js-readmore.readmore.readmore--opened
+      %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

data/styleguide/source/styleguide/slider.html.haml

@@ -0,0 +1,21 @@
+%article
+  %header
+    %h1 Slider
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.slider.js-slider
+    %ul.slider__list
+      %li.slider__item
+        %img{ src: 'http://placehold.it/1200x675&text=slide1', width: '1200', height: '675'}
+      %li.slider__item
+        %img{ src: 'http://placehold.it/1200x675&text=slide2', width: '1200', height: '675'}
+      %li.slider__item
+        %img{ src: 'http://placehold.it/1200x675&text=slide3', width: '1200', height: '675'}
+
+    .slider__controls
+      .slider__control-prev
+        - streusel_icon( 'arrow-left')
+      .slider__control-next
+        - streusel_icon( 'arrow-right')
+
+    .slider__nav

data/styleguide/source/styleguide/switches.html.haml

@@ -0,0 +1,10 @@
+%article
+  %header
+    %h1 Switches
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section
+    .switch
+      %input{ type: 'checkbox', name: "Switch 1", id: 'switch1'}
+      %label{for: 'switch1'}
+        Published

data/styleguide/source/styleguide/tab.html.haml

@@ -0,0 +1,34 @@
+%article
+  %header
+    %h1 Tab
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section
+    .tab.js-tab
+      %ul.tab__nav{ role: 'tablist'}
+        %li.tab__nav-item{ role: 'presentation' }
+          %a{ href: '#panel1', role: 'tab'} Tab titel 1
+        %li.tab__nav-item{ role: 'presentation' }
+          %a{ href: '#panel2', role: 'tab'} Tab second 2
+        %li.tab__nav-item.tab__nav-item--active{ role: 'presentation' }
+          %a{ href: '#panel3', role: 'tab'} Tab active 3
+        %li.tab__nav-item{ role: 'presentation' }
+          %a{ href: '#panel4', role: 'tab'} Tab long title 4
+        %li.tab__nav-item{ role: 'presentation' }
+          %a{ href: '#panel5', role: 'tab'} Tab long title 5
+
+      .tab__panels
+        %section.tab__panel{ role: 'tabpanel', id: 'panel1'}
+          %section.sc-content
+            %p Content 1! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        %section.tab__panel{ role: 'tabpanel', id: 'panel2'}
+          %section.sc-content
+            %p Content 2! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        %section.tab__panel.tab__panel--active{ role: 'tabpanel', id: 'panel3'}
+          %section.sc-content
+            %p Content 3! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        %section.tab__panel{ role: 'tabpanel', id: 'panel4'}
+          %section.sc-content
+            %p Content 4! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        %section.tab__panel{ role: 'tabpanel', id: 'panel5'}
+          %p Content 5! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

data/styleguide/source/styleguide/table.html.haml

@@ -0,0 +1,51 @@
+%article
+  %header
+    %h1 Tables
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  .sc-table
+    %table
+      %thead
+        %tr
+          %th A
+          %th B
+          %th C
+          %th D
+          %th E
+      %tbody
+        %tr
+          %td Row 1 with long copy
+          %td Row 1
+          %td Row 1 with long
+          %td Row 1
+          %td Row 1
+        %tr
+          %td Row 2 with long copy
+          %td Row 2
+          %td Row 2 with long
+          %td Row 2
+          %td Row 2
+        %tr
+          %td Row 3 with long copy
+          %td Row 3
+          %td Row 3 with long
+          %td Row 3
+          %td Row 3
+        %tr
+          %td Row 4 with long copy
+          %td Row 4
+          %td Row 4 with long
+          %td Row 4
+          %td Row 4
+        %tr
+          %td Row 5 with long copy
+          %td Row 5
+          %td Row 5 with long
+          %td Row 5
+          %td Row 5
+        %tr
+          %td Row 6 with long copy
+          %td Row 6
+          %td Row 6 with long
+          %td Row 6
+          %td Row 6

data/styleguide/source/styleguide/teaser.html.haml

@@ -0,0 +1,55 @@
+%article
+  %header
+    %h1 Teaser
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %aside.teaser
+    .teaser__container
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/370x210&text=teaser'}
+          .teaser__content
+            %p.teaser__subtitle Subtitel
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn lesen Sie mehr darüber
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/370x210&text=teaser'}
+          .teaser__content
+            %p.teaser__subtitle Subtitel
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn lesen Sie mehr darüber
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/370x210&text=teaser'}
+          .teaser__content
+            %p.teaser__subtitle Subtitel
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn lesen Sie mehr darüber
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/370x210&text=teaser'}
+          .teaser__content
+            %p.teaser__subtitle Subtitel
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn lesen Sie mehr darüber
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/370x210&text=teaser'}
+          .teaser__content
+            %p.teaser__subtitle Subtitel
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn lesen Sie mehr darüber
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/370x210&text=teaser'}
+          .teaser__content
+            %p.teaser__subtitle Subtitel
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn lesen Sie mehr darüber

data/styleguide/source/styleguide/teaser_assets.html.haml

@@ -0,0 +1,55 @@
+%article
+  %header
+    %h1 Teaser Assets
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %aside.teaser.teaser--assets
+    .teaser__container
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/200x200&text=teaser'}
+            %p.teaser__content Bildbeschreibung oder Legende
+          %button.btn.btn--tertiary.teaser__btn
+            Download
+            - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/200x200&text=teaser'}
+            %p.teaser__content Bildbeschreibung oder Legende
+          %button.btn.btn--tertiary.teaser__btn
+            Download
+            - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/200x200&text=teaser'}
+            %p.teaser__content Bildbeschreibung oder Legende
+          %button.btn.btn--tertiary.teaser__btn
+            Download
+            - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/200x200&text=teaser'}
+            %p.teaser__content Bildbeschreibung oder Legende
+          %button.btn.btn--tertiary.teaser__btn
+            Download
+            - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/200x200&text=teaser'}
+            %p.teaser__content Bildbeschreibung oder Legende
+          %button.btn.btn--tertiary.teaser__btn
+            Download
+            - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/200x200&text=teaser'}
+            %p.teaser__content Bildbeschreibung oder Legende
+          %button.btn.btn--tertiary.teaser__btn
+            Download
+            - streusel_icon( 'download')