typography.pug

- var veryShortContent = 'Lorem ipsum';
- var shortContent = 'Lorem ipsum dolor sit amet';
- var longContent = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '.repeat(5).trim()
- var samples = [];
- samples.push({name: 'Headline 1', code: '<h1 class="mdc-typography--headline1">' + veryShortContent + '</h1>', extraClass: contentClass})
- samples.push({name: 'Headline 2',code: '<h2 class="mdc-typography--headline2">' + veryShortContent + '</h2>', extraClass: contentClass})
- samples.push({name: 'Headline 3', code: '<h3 class="mdc-typography--headline3">' + shortContent + '</h3>', extraClass: contentClass})
- samples.push({name: 'Headline 4', code: '<h4 class="mdc-typography--headline4">' + shortContent + '</h4>', extraClass: contentClass})
- samples.push({name: 'Headline 5', code: '<h5 class="mdc-typography--headline5">' + shortContent + '</h5>', extraClass: contentClass})
- samples.push({name: 'Headline 6', code: '<h6 class="mdc-typography--headline6">' + shortContent + '</h6>', extraClass: contentClass})
- samples.push({name: 'Subtitle 1', code: '<p class="mdc-typography--subtitle1">' + shortContent + '</p>', extraClass: contentClass})
- samples.push({name: 'Subtitle 2', code: '<p class="mdc-typography--subtitle2">' + shortContent + '</p>', extraClass: contentClass})

- samples.push({name: 'Body 1', code: '<p class="mdc-typography--body1">' + longContent + '</p>', extraClass: contentClass})
- samples.push({name: 'Body 2', code: '<p class="mdc-typography--body2">' + longContent + '</p>', extraClass: contentClass})
- samples.push({name: 'Caption', code: '<p class="mdc-typography--caption">' + shortContent + '</p>', extraClass: contentClass})
- samples.push({name: 'Button', code: '<p class="mdc-typography--button">' + veryShortContent + '</p>', extraClass: contentClass})
- samples.push({name: 'Overline', code: '<p class="mdc-typography--overline">' + veryShortContent + '</p>', extraClass: contentClass})

table.mdc-typography-table
    each sample in samples
        tr
            td
                = sample.name
                br
                span.br-typography-sample-size= sample.size
            td
                .br-typography-sample-content!= sample.code
                pre.mdc-typography--pre= sample.code