Closed Components
These are fully prebuilt sections with properties for each piece of content to allow you to more easily drag and drop them onto a page. If you need a more customized section you can create one using open components (farther down the page)
The Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Standard Section
This is your default section type, and you can change the layout with a wide variety of options.
Standard Section
This is your default section type, and you can change the layout with a wide variety of options.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Main Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Main Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Main Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Main card in a larger horizontal space
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Split Content Section
Use the max width variables to define how large each column gets on desktop and they will automatically stack when they get too small.
We'd love to chat
Get in Touch
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
From the Blog
Eyebrow Text Here
FAQ's
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Answer 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Answer 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Answer 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Let's Work Together
Get the facts. Stay informed.
Sign up for Measure B updates, research and community stories from San Diego Foundation.
Open Components
These are fully modular components, allowing you more flexibility over content, and what you add and remove. Rather than a single component with a lot of properties these use layered components to give you more flexibility when updating content.
All of the below sections use a standard Section component, with a variety of other components inside, They have been renamed to allow you to quickly navigate to different setup examples you might want to preview.
Eyebrow Text Here
A standard open layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
An inner card with a background visual
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
An inner card with an image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Eyebrow Text Here
An inner card with columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Eyebrow Text Here
Split Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Eyebrow Text Here
Lorem ipsum dolor sit amet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Sign Up Today
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Two Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Text Layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
What We've Done
List Heading
Lorem ipsum dolor sitipiscing elit.
List Heading
Lorem ipsum dolor sitipiscing elit.
List Heading
Lorem ipsum dolor sitipiscing elit.
Regular Grid
Bento Grid
Split Section with Slider
An important part of this example component is making sure that the section has the correct data attribute and value so as to link the slider button's functionality with the slider component.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tab Content 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Tab Content 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
