diff --git a/components/Current/Aside.tsx b/components/Current/Aside.tsx
index fc0b3a9c4..5462c5da2 100644
--- a/components/Current/Aside.tsx
+++ b/components/Current/Aside.tsx
@@ -1,5 +1,5 @@
import Puffs from "./Asides/Puffs"
-import Contact from "./Asides/Contacts"
+import Contacts from "./Asides/Contacts"
import { AsideTypenameEnum } from "@/types/requests/utils/typename"
import type { AsideProps } from "@/types/components/current/aside"
@@ -15,9 +15,7 @@ export default function Aside({ blocks }: AsideProps) {
const type = block.__typename
switch (type) {
case AsideTypenameEnum.CurrentBlocksPageAsideContact:
- return block.contact.contactConnection.edges.map((contact) => (
-
- ))
+ return
case AsideTypenameEnum.CurrentBlocksPageAsidePuff:
return
default:
diff --git a/components/Current/Asides/Contacts/Contact.tsx b/components/Current/Asides/Contacts/Contact.tsx
new file mode 100644
index 000000000..6adc1f17a
--- /dev/null
+++ b/components/Current/Asides/Contacts/Contact.tsx
@@ -0,0 +1,57 @@
+import styles from "./contacts.module.css"
+
+import { ContactNode } from "@/types/requests/asides/contact"
+
+export default function Contact({
+ title,
+ mailing_address,
+ visiting_address,
+ phone,
+}: ContactNode) {
+ return (
+
+ )
+}
diff --git a/components/Current/Asides/Contacts/contacts.module.css b/components/Current/Asides/Contacts/contacts.module.css
new file mode 100644
index 000000000..7d9f1d5f1
--- /dev/null
+++ b/components/Current/Asides/Contacts/contacts.module.css
@@ -0,0 +1,80 @@
+.wrapper {
+ margin-top: 2rem;
+ }
+
+ .link {
+ display: inline-block;
+ transition: 200ms ease;
+ }
+
+ .link:hover {
+ text-decoration: none;
+ transform: scale(1.01);
+ }
+
+ .image {
+ height: auto;
+ object-fit: contain;
+ object-position: center;
+ }
+
+ .content {
+ padding: 20px 0px;
+ }
+
+ .heading {
+ font-family: BrandonText-Bold,Arial,Helvetica,sans-serif;
+ font-size: 1.375rem;
+ line-height: 1.1em;
+ text-transform: uppercase;
+ font-weight: 400;
+ color: #483729;
+ margin-bottom: 1rem;
+ }
+
+ .link:hover .heading {
+ text-decoration: underline;
+ }
+
+ .phoneContainer {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ }
+
+ .phoneNumberLink {
+ line-height: 1.1em;
+ font-family: Helvetica,Arial,sans-serif;
+ font-weight: 400;
+ text-transform: none;
+ font-size: 1.125rem;
+ color: #00838e;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+
+ .p {
+ color: #333;
+ line-height: 1.3;
+ margin-bottom: 1em;
+ padding-top: 7px;
+ text-decoration: none;
+ }
+
+ .phoneNumberLink:active,
+ .phoneNumberLink:hover {
+ outline: 0;
+ text-decoration: underline;
+ }
+
+ @media screen and (min-width: 950px) {
+ .heading {
+ font-size: 1.625rem;
+ }
+
+ .phoneNumberLink {
+ line-height: 1.1em;
+ font-size: 1.375rem;
+ }
+ }
\ No newline at end of file
diff --git a/components/Current/Asides/Contacts/index.tsx b/components/Current/Asides/Contacts/index.tsx
new file mode 100644
index 000000000..76abe48b3
--- /dev/null
+++ b/components/Current/Asides/Contacts/index.tsx
@@ -0,0 +1,8 @@
+import type { ContactsProps } from "@/types/components/current/asides/contact"
+import Contact from "./Contact"
+
+export default function Contacts({ contacts }: ContactsProps) {
+ return contacts.map((contact) => (
+
+ ))
+}
diff --git a/lib/graphql/Fragments/Contact.graphql b/lib/graphql/Fragments/Contact.graphql
index 2f320a1b8..49c4326d7 100644
--- a/lib/graphql/Fragments/Contact.graphql
+++ b/lib/graphql/Fragments/Contact.graphql
@@ -6,6 +6,9 @@ fragment Contact on ContactBlock {
street
zip
}
+ system {
+ uid
+ }
phone
title
visiting_address {
diff --git a/types/components/current/asides/contact.ts b/types/components/current/asides/contact.ts
index 1f0ea7b5f..37f06ed0f 100644
--- a/types/components/current/asides/contact.ts
+++ b/types/components/current/asides/contact.ts
@@ -1,3 +1,4 @@
import type { ContactNode } from "@/types/requests/asides/contact"
+import type { Node } from "@/types/requests/utils/edges"
-export type ContactProps = ContactNode
+export type ContactsProps = { contacts: Node[] }
diff --git a/types/requests/asides/contact.ts b/types/requests/asides/contact.ts
index a32e8545a..4a33c1457 100644
--- a/types/requests/asides/contact.ts
+++ b/types/requests/asides/contact.ts
@@ -8,6 +8,9 @@ export type ContactNode = {
street: string
zip: string
}
+ system: {
+ uid: string
+ }
phone: string
title: string
visiting_address: {