How to use @rmwc/typography - 10 common examples
To help you get started, we’ve selected a few @rmwc/typography examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fluidtrends / chunky / web / lib / components / Timer.js View on Github 
value: function renderSimpleText() {
return _react2.default.createElement(
_typography.Typography,
{ use: 'headline4', style: { margin: '10px', color: this.props.textColor } },
this.state.period.text
);
}
}, {value: function renderIcoCoverTitle() {
if (!this.props.title) {
return _react2.default.createElement('div', {
className: 'jsx-869534894'
});
}
var titleAdditionalStyle = this.props.subtitleStyle ? this.props.subtitleStyle : {};
return _react2.default.createElement(
_typography.Typography,
{
use: 'headline4',
style: _extends({
margin: '20px',
color: this.props.color
}, titleAdditionalStyle)
},
' ',
this.props.title
);
}
}, {value: function renderComponent() {
return _react2.default.createElement(
'div',
{ style: { display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center', padding: "50px", backgroundColor: this.props.backgroundColor }, className: _style2.default.dynamic([['2929084194', ['#546E7A', this.props.hoverColor ? this.props.hoverColor : '#00bcd4']]])
},
_react2.default.createElement(
'div',
{ style: { textAlign: 'center' }, className: _style2.default.dynamic([['2929084194', ['#546E7A', this.props.hoverColor ? this.props.hoverColor : '#00bcd4']]])
},
this.props.title && _react2.default.createElement(
_typography.Typography,
{
use: 'headline2',
style: _extends({
margin: '20px',
color: this.props.textColor
}, this.props.titleAdditionalStyle)
},
' ',
this.props.title
),
this.renderThumbnail(),
this.renderModal()
)
);
}
}]);},
key: 'item' + index
},
this.renderCardMedia(item),
_react2.default.createElement(
'div',
{ style: { padding: '15px 1rem 1rem 1rem', textAlign: 'right' } },
_react2.default.createElement(
'div',
{
style: {
height: 140
}
},
_react2.default.createElement(
_typography.Typography,
{
use: 'headline',
tag: 'h2',
style: {
textAlign: 'center',
fontWeight: 700,
paddingBottom: '10px'
}
},
item.name
),
_react2.default.createElement(
_typography.Typography,
{ use: 'title', tag: 'h3', style: { textAlign: 'center' } },
item.title
)_react2.default.createElement(_Media2.default, { cache: this.props.cache, roundImg: true, image: item.imageUrl, style: style })
),
_react2.default.createElement(
'div',
{ style: { display: 'flex', flex: 2, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' } },
_react2.default.createElement(
_typography.Typography,
{ use: 'subtitle1', tag: 'h2', style: {
color: this.props.textColor
} },
'"',
item.text,
'"'
),
_react2.default.createElement(
_typography.Typography,
{ use: 'subtitle1', tag: 'h3', style: {
color: this.props.personNameColor,
fontWeight: 'bold'
} },
item.person
),
_react2.default.createElement(
_typography.Typography,
{ use: 'subtitle1', tag: 'h4', style: {
color: this.props.descriptionColor
} },
item.description
)
)
)
);value: function renderCard(item, index) {
var details = item.details.substring(0, 120);
return _react2.default.createElement(
_card.Card,
{ style: { width: '320px' }, key: 'item' + index },
_react2.default.createElement(
_button.Button,
{ onClick: this.triggerEvent(item.name || index, item.action), style: { padding: 0, height: '100%' } },
this.renderCardMedia(item)
),
_react2.default.createElement(
'div',
{ style: { padding: '0 1rem 1rem 1rem' } },
_react2.default.createElement(
_typography.Typography,
{ use: 'title', tag: 'h2' },
item.title
),
_react2.default.createElement(
_typography.Typography,
{
use: 'subheading1',
tag: 'h3',
theme: 'text-secondary-on-background',
style: { marginTop: '1rem' } },
details + ' ...'
)
),
this.renderCardTags(item),
_react2.default.createElement(
_card.CardActions,value: function renderSection(section, index) {
var style = this.props.small ? { color: 'white', textShadow: '2px 2px 5px #607D8B' } : { color: this.props.textColor ? this.props.textColor : '#000' };
var translatedTitle = this.props.translation && this.state.strings && this.state.selectedLanguage ? this.state.strings[this.state.selectedLanguage]['section' + index]['title'] : section.title;
return _react2.default.createElement(
'div',
{
key: 'section' + index,
style: { padding: '0 1rem 1rem 1rem', textAlign: 'right' }
},
_react2.default.createElement(
_typography.Typography,
{ use: 'display1', tag: 'h1', style: style },
translatedTitle
),
_react2.default.createElement(
'div',
{
style: {
display: 'flex',
flex: 1,
flexWrap: 'wrap',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
},
this.renderTeamMemebers(section.members)alignItems: 'center',
padding: 20,
flexDirection: 'row',
height: '300px'
}
},
_react2.default.createElement(
'div',
{ style: { display: 'flex', flex: 1, justifyContent: 'center' } },
_react2.default.createElement(_Media2.default, { cache: this.props.cache, roundImg: true, image: item.imageUrl, style: style })
),
_react2.default.createElement(
'div',
{ style: { display: 'flex', flex: 2, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' } },
_react2.default.createElement(
_typography.Typography,
{ use: 'subtitle1', tag: 'h2', style: {
color: this.props.textColor
} },
'"',
item.text,
'"'
),
_react2.default.createElement(
_typography.Typography,
{ use: 'subtitle1', tag: 'h3', style: {
color: this.props.personNameColor,
fontWeight: 'bold'
} },
item.person
),
_react2.default.createElement(_typography.Typography,
{
use: 'headline3',
style: _extends({
margin: '20px',
position: 'absolute',
bottom: '-100px',
color: this.props.color
}, titleAdditionalStyle)
},
' ',
title,
' '
),
subtitle && _react2.default.createElement(
_typography.Typography,
{
use: 'headline4',
style: _extends({
margin: '20px',
position: 'absolute',
bottom: '-210px',
color: this.props.color
}, subtitleAdditionalStyle)
},
subtitle
)
);
}
}, {_typography.Typography,
{
use: 'caption'
},
item.label
)
)
)
),
_react2.default.createElement(
_fab.Fab,
{ mini: true },
'star'
),
_react2.default.createElement(
_typography.Typography,
{
use: 'title',
style: { marginLeft: 5 }
},
item.xp
)
)
),
_react2.default.createElement(
_card.CardActions,
{ style: { justifyContent: 'center', marginBottom: '1rem' } },
_react2.default.createElement(
_card.CardActionButtons,
null,
_react2.default.createElement(
_card.CardAction,@rmwc/typography
Material Design’s text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
