Instantly share code, notes, and snippets.

Embed
What would you like to do?
- 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment