UI structure (basic cards + css modules setup)
This commit is contained in:
23
src/components/UI/card/Card.css
Normal file
23
src/components/UI/card/Card.css
Normal file
@ -0,0 +1,23 @@
|
||||
.card {
|
||||
composes: base from "../theme.css";
|
||||
composes: container from "../theme.css";
|
||||
composes: rounded from "../theme.css";
|
||||
composes: depth from "../theme.css";
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer):first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card > *:not(iframe, video, img, header, footer):last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card > iframe, .card > video, .card > img {
|
||||
max-width: 100%;
|
||||
}
|
7
src/components/UI/card/Card.js
Normal file
7
src/components/UI/card/Card.js
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import styles from './Card.css'
|
||||
|
||||
|
||||
export default function Card({style, children}) {
|
||||
return <div className={styles.card} style={style}>{children}</div>
|
||||
}
|
Reference in New Issue
Block a user