Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
desc: 'A wrapper for placing any text content in a card. _Or anything really_.',
details: [{
name: 'component',
pt: 's',
desc: 'The component to render the card text as.',
}],
}, {
component: CardMedia,
desc: `This is a component for displaying some media information at the correct
aspect ratio from the material design docs.`,
details: [{
name: 'aspectRatio',
pt: `one(['${CardMedia.aspect.equal}, '${CardMedia.aspect.wide}'])`,
desc: `This is the aspect ratio to use for a card media item.
To be safe, you should probably use \`CardMedia.aspect.equal\`
'(${CardMedia.aspect.equal}') or \`CardMedia.aspect.wide\` ('${CardMedia.aspect.wide}').`,
}, {
name: 'forceAspect',
pt: 'b',
desc: 'Boolean if the \`aspectRation\` should be forced. *should* be true 99% of the time.',
}, {
name: 'overlay',
pt: 'no',
desc: `An optional overlay to display over the media item. This should be the
\`CardTitle\` component and optionally the \`CardActions\` component. They
will be modified to be styled for the overlay.`,
}, {
name: 'children',
pt: 'no',
desc: 'The media item to display. Usually an image or some graphic.',
}],
}, {
There are already some other projects out there that are a lot farther along, so
those might be a better choice for you. I do think the other projects are set up
on inline styling, which I am not a fan of personally.
<p></p>
<p>
The eventual goal of this project is to be able to quickly set up a material design
website by changing a few variables or using the given sass mixins/functions for
fine tuning.
</p>
<section style="{{">
<div>
<img alt="A person figure sitting at a desk looking at a laptop." src="{`${imgPrefix}/getting-started.jpg`}">
<img alt="A person figure painting on a canvas" src="{`${imgPrefix}/customization.jpg`}">
<img alt="Two person figures carrying a material item shaped like a pipe." src="{`${imgPrefix}/components.jpg`}">
</div></section>
}],
}, {
component: CardText,
desc: 'A wrapper for placing any text content in a card. _Or anything really_.',
details: [{
name: 'component',
pt: 's',
desc: 'The component to render the card text as.',
}],
}, {
component: CardMedia,
desc: `This is a component for displaying some media information at the correct
aspect ratio from the material design docs.`,
details: [{
name: 'aspectRatio',
pt: `one(['${CardMedia.aspect.equal}, '${CardMedia.aspect.wide}'])`,
desc: `This is the aspect ratio to use for a card media item.
To be safe, you should probably use \`CardMedia.aspect.equal\`
'(${CardMedia.aspect.equal}') or \`CardMedia.aspect.wide\` ('${CardMedia.aspect.wide}').`,
}, {
name: 'forceAspect',
pt: 'b',
desc: 'Boolean if the \`aspectRation\` should be forced. *should* be true 99% of the time.',
}, {
name: 'overlay',
pt: 'no',
desc: `An optional overlay to display over the media item. This should be the
\`CardTitle\` component and optionally the \`CardActions\` component. They
will be modified to be styled for the overlay.`,
}, {
name: 'children',
pt: 'no',
{Array.apply(null, new Array(6)).map((_, i) => (
}
>
<img src="{randomImage({">
favorite
bookmark
reply
))}
}
title="Title"
subtitle="Subtitle"
/>
{loremIpsum(4)}
)}
>
<img alt="Some image" src="{randomImage()}">
);
}
<div>
<img alt="A person figure sitting at a desk looking at a laptop." src="{`${imgPrefix}/getting-started.jpg`}">
<img alt="A person figure painting on a canvas" src="{`${imgPrefix}/customization.jpg`}">
<img alt="Two person figures carrying a material item shaped like a pipe." src="{`${imgPrefix}/components.jpg`}">
</div>
);
}
}