Feat/132 (#198)

client/src/common/components/title-card/TitleCard.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+import style from './TitleCard.module.scss';
+
+export default function TitleCard(props) {
+  const { label, title, subtitle, presenter } = props;
+
+  return (
+    <>
+      <div className={style.label}>{label}</div>
+      <div className={style.title}>{title}</div>
+      <div className={style.presenter}>{presenter}</div>
+      <div className={style.subtitle}>{subtitle}</div>
+    </>
+  );
+}
+
+TitleCard.propTypes = {
+  label: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  presenter: PropTypes.string,
+}

client/src/common/components/title-card/TitleCard.module.scss

@@ -0,0 +1,38 @@
+@use '../../../theme/main' as *;
+
+.label {
+  @include card-label;
+}
+
+.title,
+.subtitle,
+.presenter {
+  @include ellipsis;
+}
+
+.title {
+  @include card-title;
+  font-size: 2.5vw;
+  flex: 1;
+}
+
+.subtitle,
+.presenter {
+  color: $subtitle-gray;
+}
+
+.subtitle {
+  font-size: 1.5vw;
+  font-weight: 200;
+  margin-top: -0.8vh;
+}
+
+.presenter {
+  font-size: 2vw;
+}
+
+.title:after,
+.presenter:after,
+.subtitle:after {
+  content: '\200b';
+}