Framework
Global Presets UI Style Guide
01. Color palette
In this section, you will find the carefully curated colors that will be utilized throughout your website. Ranging from primary tones that’ll dominate your site to complementary hues that enhance visual engagement, these colors reflect your brand’s ethos and ensure consistency across all web elements.
#FFFFFF
#F9F9F9
#f2f2f2
#e0e0e0
#444444
#000000
#F9F9F9
#e0e0e0
#444444
#000000
02. Text styles
Typography is more than just words on a screen; it’s an art that bridges the gap between message clarity and visual aesthetics. Here, we present various text styles that your website will employ. You’ll see primary, secondary, and tertiary versions of headings and body text, designed to establish a clear hierarchy and facilitate easy reading. Additionally, different formatting elements like bullet lists will be showcased, ensuring text is presented in the most effective manner for your audience.
Primary
Secondary
Tertiary
Heading 1
Heading 1
Heading 1
Heading 1
Heading 2
Heading 2
Heading 2
Heading 2
Heading 3
Heading 3
Heading 3
Heading 3
Heading 4
Heading 4
Heading 4
Heading 4
Body
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.
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.
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.
List
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
- Lorum Ipsum
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
03. Modules
Every component on a website, from buttons to contact forms, plays a unique role in the user’s journey. In this section, we showcase the various modules that will be incorporated into your site. Whether it’s a call to action that prompts a visitor to take the next step or a testimonial that instills trust, these elements have been designed to seamlessly integrate with the overall aesthetic while ensuring optimal user engagement.
Primary
Secondary
Tertiary
Button
Blurb
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Email optin
Contact form
Image
Call to action
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Divider
Person
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Name Goes Here
Position
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Social Media Follow
Toggle
Click Here To Open
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Click Here To Open
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Click Here To Open
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Testimonial
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Video
Accordion
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Blog
Hoop Fond’s Annual Women’s High Tea Event
On August 26, 2023, the Initiative for Community Advancement, Hoop Fond, hosted their much-anticipated annual Women's High Tea event. This gathering was more than just a social affair; it was a powerful demonstration of unity and commitment towards addressing the...
A Night of Rhythms and Resilience: ICA Jazz Event Raises Funds for Community Rebuilding
The evening of July 29, 2023, was a harmonious blend of music and community spirit as the Initiative for Community Advancement (ICA) hosted a spectacular Jazz Event. Held with the aim of raising funds for the Community Rebuilding Fund, this event marked a significant...
Celebrating Success: The Dr. Somers Education Fund Grant Ceremony
Herewith our very first scholars who received High School bursaries from our Dr. Somers Education Fund. Thank you to all sponsors and partners involved in this initiative. "Education is the key to success." We look forward to the growth of this fund with your help....
Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort
At the recent NPO Summit, change-makers converged at the scenic Piekenierskloof Mountain Resort, sharing insights on the Bergrivier NPO sector, the integral role of NPOs in the IDP, and the alignment of NPO missions with Sustainable Development Goals. A confluence of passion and purpose, the summit underscored the power of collective action, data-driven strategies, and the relentless drive of NPOs to shape a brighter, more equitable future.
MyDorp Exhibition: Empowering Youth for a Brighter Future
At a recent exhibition, the MyDorp program unveiled its transformative approach that not only fosters community engagement but champions the youth as pivotal agents of change. This initiative is more than a program; it’s a promise of a brighter future, emphasizing the collective strength of active citizenship and community collaboration. As MyDorp lights the way, it serves as a testament to the potential within our youth and the power of united action
Empowering Bergrivier’s Youth through Data and Digital Innovation
In a groundbreaking workshop organized by OpenUpSA and ICA, Bergrivier’s youth dove into the world of data and digital technology, learning to harness its power for community development. Through tools like the innovative IDP Dashboard, they discovered how to access, understand, and influence their municipality’s development plans, marking a pivotal moment in promoting active civic participation and bridging the gap between local governance and its citizens.
Empowering Youth: The Bergrivier YouthFund Grant Ceremony
Date: December 14, 2022 In a heartwarming and inspiring event on December 14, 2022, the Initiative for Community Advancement celebrated their Grant ceremony of the Bergrivier YouthFund. This momentous occasion was marked by a grant ceremony, where the Bergrivier Youth...
Hoop Fond’s Annual Women’s High Tea Event
On August 26, 2023, the Initiative for Community Advancement, Hoop Fond, hosted their much-anticipated annual Women's High Tea event. This gathering was more than just a social affair; it was a powerful demonstration of unity and commitment towards addressing the...
A Night of Rhythms and Resilience: ICA Jazz Event Raises Funds for Community Rebuilding
The evening of July 29, 2023, was a harmonious blend of music and community spirit as the Initiative for Community Advancement (ICA) hosted a spectacular Jazz Event. Held with the aim of raising funds for the Community Rebuilding Fund, this event marked a significant...
Celebrating Success: The Dr. Somers Education Fund Grant Ceremony
Herewith our very first scholars who received High School bursaries from our Dr. Somers Education Fund. Thank you to all sponsors and partners involved in this initiative. "Education is the key to success." We look forward to the growth of this fund with your help....
Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort
At the recent NPO Summit, change-makers converged at the scenic Piekenierskloof Mountain Resort, sharing insights on the Bergrivier NPO sector, the integral role of NPOs in the IDP, and the alignment of NPO missions with Sustainable Development Goals. A confluence of passion and purpose, the summit underscored the power of collective action, data-driven strategies, and the relentless drive of NPOs to shape a brighter, more equitable future.
MyDorp Exhibition: Empowering Youth for a Brighter Future
At a recent exhibition, the MyDorp program unveiled its transformative approach that not only fosters community engagement but champions the youth as pivotal agents of change. This initiative is more than a program; it’s a promise of a brighter future, emphasizing the collective strength of active citizenship and community collaboration. As MyDorp lights the way, it serves as a testament to the potential within our youth and the power of united action
Empowering Bergrivier’s Youth through Data and Digital Innovation
In a groundbreaking workshop organized by OpenUpSA and ICA, Bergrivier’s youth dove into the world of data and digital technology, learning to harness its power for community development. Through tools like the innovative IDP Dashboard, they discovered how to access, understand, and influence their municipality’s development plans, marking a pivotal moment in promoting active civic participation and bridging the gap between local governance and its citizens.
Empowering Youth: The Bergrivier YouthFund Grant Ceremony
Date: December 14, 2022 In a heartwarming and inspiring event on December 14, 2022, the Initiative for Community Advancement celebrated their Grant ceremony of the Bergrivier YouthFund. This momentous occasion was marked by a grant ceremony, where the Bergrivier Youth...
Hoop Fond’s Annual Women’s High Tea Event
On August 26, 2023, the Initiative for Community Advancement, Hoop Fond, hosted their much-anticipated annual Women's High Tea event. This gathering was more than just a social affair; it was a powerful demonstration of unity and commitment towards addressing the...
A Night of Rhythms and Resilience: ICA Jazz Event Raises Funds for Community Rebuilding
The evening of July 29, 2023, was a harmonious blend of music and community spirit as the Initiative for Community Advancement (ICA) hosted a spectacular Jazz Event. Held with the aim of raising funds for the Community Rebuilding Fund, this event marked a significant...
Celebrating Success: The Dr. Somers Education Fund Grant Ceremony
Herewith our very first scholars who received High School bursaries from our Dr. Somers Education Fund. Thank you to all sponsors and partners involved in this initiative. "Education is the key to success." We look forward to the growth of this fund with your help....
Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort
At the recent NPO Summit, change-makers converged at the scenic Piekenierskloof Mountain Resort, sharing insights on the Bergrivier NPO sector, the integral role of NPOs in the IDP, and the alignment of NPO missions with Sustainable Development Goals. A confluence of passion and purpose, the summit underscored the power of collective action, data-driven strategies, and the relentless drive of NPOs to shape a brighter, more equitable future.
MyDorp Exhibition: Empowering Youth for a Brighter Future
At a recent exhibition, the MyDorp program unveiled its transformative approach that not only fosters community engagement but champions the youth as pivotal agents of change. This initiative is more than a program; it’s a promise of a brighter future, emphasizing the collective strength of active citizenship and community collaboration. As MyDorp lights the way, it serves as a testament to the potential within our youth and the power of united action
Empowering Bergrivier’s Youth through Data and Digital Innovation
In a groundbreaking workshop organized by OpenUpSA and ICA, Bergrivier’s youth dove into the world of data and digital technology, learning to harness its power for community development. Through tools like the innovative IDP Dashboard, they discovered how to access, understand, and influence their municipality’s development plans, marking a pivotal moment in promoting active civic participation and bridging the gap between local governance and its citizens.
Empowering Youth: The Bergrivier YouthFund Grant Ceremony
Date: December 14, 2022 In a heartwarming and inspiring event on December 14, 2022, the Initiative for Community Advancement celebrated their Grant ceremony of the Bergrivier YouthFund. This momentous occasion was marked by a grant ceremony, where the Bergrivier Youth...