diff --git a/packages/core/src/components/AboutCard/AboutCard.tsx b/packages/core/src/components/AboutCard/AboutCard.tsx
new file mode 100644
index 0000000000..e18894f3fb
--- /dev/null
+++ b/packages/core/src/components/AboutCard/AboutCard.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ Divider,
+ makeStyles,
+} from '@material-ui/core';
+import { SubHeader } from './SubHeader';
+import { SubHeaderLink } from './types';
+
+const useStyles = makeStyles({
+ gridItemCard: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: 'calc(100% - 10px)', // for pages without content header
+ marginBottom: '10px',
+ },
+ gridItemCardContent: {
+ flex: 1,
+ },
+});
+
+type Props = {
+ title: string;
+ headerClass?: string;
+ headerAction?: React.ReactNode;
+ links: SubHeaderLink[];
+ contentClass?: string;
+ content: React.ReactNode;
+ variant?: string;
+};
+
+export const AboutCard = ({
+ title,
+ headerAction,
+ links,
+ content,
+ variant,
+}: Props) => {
+ const classes = useStyles();
+ return (
+
+ }
+ />
+
+
+ {content}
+
+
+ );
+};
diff --git a/packages/core/src/components/AboutCard/IconLinkVertical.tsx b/packages/core/src/components/AboutCard/IconLinkVertical.tsx
new file mode 100644
index 0000000000..f935d2fa6e
--- /dev/null
+++ b/packages/core/src/components/AboutCard/IconLinkVertical.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import classnames from 'classnames';
+import { makeStyles, Link } from '@material-ui/core';
+import LinkIcon from '@material-ui/icons/Link';
+import { Link as RouterLink } from 'react-router-dom';
+
+type IconLinkVerticalProps = {
+ icon?: React.ReactNode;
+ href?: string;
+ disabled?: boolean;
+ title?: string;
+ label: string;
+ action?: React.ReactNode;
+};
+
+const useIconStyles = makeStyles(theme => ({
+ link: {
+ display: 'grid',
+ justifyItems: 'center',
+ gridGap: 4,
+ textAlign: 'center',
+ },
+ disabled: {
+ color: 'gray',
+ },
+ label: {
+ fontSize: '0.7rem',
+ textTransform: 'uppercase',
+ fontWeight: 600,
+ letterSpacing: 1.2,
+ },
+ linkStyle: {
+ color: theme.palette.secondary.main,
+ },
+}));
+
+export function IconLinkVertical({
+ icon = ,
+ href = '#',
+ disabled = false,
+ action,
+ ...props
+}: IconLinkVerticalProps) {
+ const classes = useIconStyles();
+
+ if (disabled) {
+ return (
+
+ {icon}
+ {props.label}
+
+ );
+ }
+
+ if (action) {
+ return (
+
+ {icon}
+ {action}
+
+ );
+ }
+
+ // Absolute links should not be using RouterLink
+ if (href?.startsWith('//') || href?.includes('://')) {
+ return (
+
+ {icon}
+ {props.label}
+
+ );
+ }
+
+ return (
+
+ {icon}
+ {props.label}
+
+ );
+}
diff --git a/packages/core/src/components/AboutCard/SubHeader.tsx b/packages/core/src/components/AboutCard/SubHeader.tsx
new file mode 100644
index 0000000000..861821f89b
--- /dev/null
+++ b/packages/core/src/components/AboutCard/SubHeader.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { IconLinkVertical } from './IconLinkVertical';
+import { SubHeaderLink } from './types';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+ links: {
+ margin: theme.spacing(2, 0),
+ display: 'grid',
+ gridAutoFlow: 'column',
+ gridAutoColumns: 'min-content',
+ gridGap: theme.spacing(3),
+ },
+}));
+
+type Props = {
+ links: SubHeaderLink[];
+};
+
+export const SubHeader = ({ links }: Props) => {
+ const classes = useStyles();
+ return (
+
+ );
+};
diff --git a/packages/core/src/components/AboutCard/index.ts b/packages/core/src/components/AboutCard/index.ts
new file mode 100644
index 0000000000..0491d467f8
--- /dev/null
+++ b/packages/core/src/components/AboutCard/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { AboutCard } from './AboutCard';
+export { IconLinkVertical } from './IconLinkVertical';
diff --git a/packages/core/src/components/AboutCard/types.ts b/packages/core/src/components/AboutCard/types.ts
new file mode 100644
index 0000000000..e1c3948797
--- /dev/null
+++ b/packages/core/src/components/AboutCard/types.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type SubHeaderLink = {
+ icon?: React.ReactNode;
+ href?: string;
+ disabled?: boolean;
+ title?: string;
+ label: string;
+ action?: React.ReactNode;
+ edithref?: string;
+};