How to use @rmwc/card - 10 common examples
To help you get started, we’ve selected a few @rmwc/card 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 / Collection.js View on Github 
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,value: function renderComponent() {
if (this.state.loading) {
return _react2.default.createElement(
'div',
{ style: { display: 'flex', flex: 1, margin: '10px', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' } },
_react2.default.createElement(
_card.Card,
{ style: { width: '80vw', margin: '20px', padding: '0px' } },
_react2.default.createElement(_linearProgress.LinearProgress, { determinate: false })
)
);
}
if (!this.state.period) {
return _react2.default.createElement('div', null);
}
return _react2.default.createElement(
'div',
{ style: {
color: 'white',
position: 'relative',
display: 'flex',value: function renderCard(item, index) {
var _this4 = this;
var linkedIn = item.linkedIn,
github = item.github,
website = item.website,
text = item.text;
var width = this.props.small ? 230 : 320;
var height = this.props.small ? 340 : 540;
var translatedBtnSeeMoreText = this.props.translation && this.state.strings && this.state.selectedLanguage ? this.state.strings[this.state.selectedLanguage]['btnTextDetails'] : 'See more';
return _react2.default.createElement(
_card.Card,
{
style: {
width: width,
height: height,
margin: 20,
textAlign: 'center'
},
key: 'item' + index
},
this.renderCardMedia(item),
_react2.default.createElement(
'div',
{ style: { padding: '15px 1rem 1rem 1rem', textAlign: 'right' } },
_react2.default.createElement(
'div',
{value: function renderChallenge(item, index) {
var details = item.details.substring(0, 50);
return _react2.default.createElement(
_card.Card,
{ style: { width: '320px' }, key: 'item' + index },
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',_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,
{ onClick: this.triggerEvent(item.name || index, item.action) },
' ',
item.actionTitle || 'Learn More',
' '
)
)
)
);
}
}, {{ 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,
{ style: { justifyContent: 'center', marginBottom: '1rem' } },
this.renderCardButtons(item, index)
)
);
}
}, {var width = this.props.small ? 100 : 220;
var height = this.props.small ? 100 : 220;
var style = {
alignSelf: 'center',
marginTop: '20px',
objectFit: 'cover',
height: height,
width: width,
borderRadius: '50%',
objectPosition: 'center center'
};
var props = Object.assign({}, this.props);
delete props.video;
return _react2.default.createElement(
_card.CardMedia,
{
style: {
backgroundColor: item.backgroundColor,
cursor: this.props.imageClickable && !this.state.detailDialogOpen ? 'pointer' : 'initial'
},
onClick: function onClick() {
_this3.props.imageClickable ? _this3.setState({ detailDialogOpen: true, item: item }) : false;
}
},
_react2.default.createElement(_Media2.default, { cache: this.props.cache, roundImg: true, image: image, style: style })
);
}
}, {return _react2.default.createElement('div', null);
}
var style = {
alignSelf: 'center',
width: '320px',
height: '170px',
objectFit: 'cover',
objectPosition: 'center center'
};
var innerWidth = '320px';
var props = Object.assign({}, this.props);
delete props.video;
return _react2.default.createElement(
_card.CardMedia,
{ style: {
backgroundColor: item.backgroundColor
} },
_react2.default.createElement(_Media2.default, {
cache: this.props.cache,
image: image,
desktop: this.props.desktop,
innerWidth: innerWidth,
style: style })
);
}
}, {value: function renderCardButtons(item, index) {
if (this.props.renderCardButtons) {
return this.props.renderCardButtons(item, index);
}
return _react2.default.createElement(
_card.CardActionButtons,
null,
_react2.default.createElement(
_card.CardAction,
{ onClick: this.triggerEvent(item.name || index, Object.assign({}, item.action, { primary: true })) },
' ',
item.actionTitle || 'Learn More',
' '
),
this.renderSecondaryCardButton(item, index)
);
}
}, {value: function renderCardButtons(item, index) {
if (this.props.renderCardButtons) {
return this.props.renderCardButtons(item, index);
}
return _react2.default.createElement(
_card.CardActionButtons,
null,
_react2.default.createElement(
_card.CardAction,
{ onClick: this.triggerEvent(item.name || index, Object.assign({}, item.action, { primary: true })) },
' ',
item.actionTitle || 'Learn More',
' '
),
this.renderSecondaryCardButton(item, index)
);
}
}, {
