LocationSingle component for the Max Design System
Location Single Template comes with a featured card showcasing an image, heading, contact field, address fields and opening hours. A Google maps section is then presented revealing the location, and followed up with a call to action section with text area content.
``shell`
yarn add @berlitz/location-single
| Argument | Type | Required | Default | Example |
| ------------------- | ------------ | -------- | ------- | ---------- |
| featuredCardSection | object | ✅ | {} | View Below |
| mapSection | object | ✅ | {} | View Below |
| contentSection | object | ✅ | {} | View Below |
`jsAwesome Language Center
const featuredCardSection = {
heading: ,
image: {
url: 'https://picsum.photos/1280/720/?random',
description: 'random image',
},
nonPhysicalLocation: false,
nonPhysicalLocationDescription: 'Awesome Language Center Description',
email: 'a@a.com',
phone: '623-207-7801',
addressLineOne: '420 Blaze It, Street',
addressLineTwo: 'Perth AU 6000',
classroomHours: [
{ day: 'Monday - Friday', hours: '8:00AM - 9:00PM' },
{ day: 'Saturday', hours: '9:00AM - 12:00PM' },
],
officeHours: [
{ day: 'Monday - Friday', hours: '8:00AM - 9:00PM' },
{ day: 'Saturday', hours: '9:00AM - 12:00PM' },
],
addressTitle: 'Address',
classroomHoursTitle: 'Classroom Hours',
officeHoursTitle: 'Öffice Hours',
}
const mapSection = {
location: { lat: -31.953832, lng: 115.853299 },
googleMapURL: '{API URL HERE}',
}
const contentSection = {
innerHTML:
You're obsessed with the fat lady! Here's my chance. I've crashed into a beet truck. Remind me to thank John for a lovely weekend. This thing comes fully loaded. Just my luck, no ice. I've crashed into a beet truck. A computer virus.
,
}
`Usage
jsx
import React from 'react'
import LocationSingle from '@berlitz/location-single'
const MyApp = () => {
return (
mapSection={mapSection}
contentSection={contentSection}
/>
)
}
`$3
- Single Page with Location Data
$3
Recommended packages to work with location-single