Component Library

Examples of the currently available components in Flynt

Theme Information

Most of the Components showed on this page can be displayed in one of four themes. The options are (none): white background, Dark: dark background, Light: light background, Hero: Brand color background. The theme can be chosen under the “Options” tab in the component editor.

Accordion

Displays larger amounts of info within a drop down Accordion. Works well for information that not all users need to see.

Block: Call To Action V1

Provides the user with information and calls them to take action upon that info by clicking a button. Version 1 provides the option of one or two CTA Buttons, which are located on the right of the informative text.

Block: Call To Action V2

Provides the user with information and calls them to take action upon that info by clicking a button. Version 2 provides the option of one CTA Button, located below the informative text.

Block: Count Up

Displays statistics or financial information. Each figure has an icon to represent it, and the numbers count up to their value as the users views the component.

$0
Budget
0
Active Users
0
High-tech devices

Block: Collapse

This component is not visible. The collapse block reduces the vertical space between components. Simply move the component in between components with same color themes.

 

It is used between the WYSIWYG Component below this and the Block: Image Component.

Block: Image

Displays an image. The only option provided is the display size of the image.

Block: Image Text

Allows for a larger amount of content on either side of an image.

 

When multiple are used next to each other, it may look better to place a Block: Collapse in between them, like done here.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block: Image Text Parallax

In this Component the image and text have almost equal weight, but focus is on the image, as it’s having a parallax movement while scrolling past the component. Image file type must be .jpg

 

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block: Text Image Crop

In this Component the image and text have equal weight, though the image isn’t resized proportionally but is sized according to the text height and gets cropped when resized.

Block: Video Oembed

Video embed, with a poster image and overlaying play button showing before the video is started.

Block: Wysiwyg

Provides a simple environment for formatting text in any way needed. It supports a few font sizes, left or center justification, as well as options such as Bold, underlined, italic, links, and lists.

Block: Wysiwyg Two Column

Identical to the main Wysiwyg Component, except that it wraps the text into two columns.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Block: Wysiwyg Sidebar

This Wysiwyg adds a sidebar to the left side for smaller amounts of information.

Grid: Image Text

Up to 4 grid items with an image and WYSIWYG each. Can be used for any kind of static content. The images can optionally functions as links and a  CTA Button can be enabled as well. Has an optional card style.

  • 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Components Library

Grid: Events - The next three upcoming events

  • QEW Presentations at Friends General Conference Gathering

    Join Quaker Earthcare Witness at the virtual Friends General Conference (FGC) Gathering for a week of afternoon presentations. To register, please visit FGC's website.

    All presentations via Zoom, 5-6:30 pm Eastern

    QEW Staff will be present at each event to help with technical issues and to do a brief introduction about QEW.

    Monday, July 4 – Where Eco-Spirituality Meets Eco-Justice: Hayley Hathaway. 
Let’s talk about ecospirituality and what it means in these pandemic times of climate crisis, economic inequality, threatened democracy, and structural racism. How do we live in right relationship with each other and the Living world? How could our work for justice be impacted by an increasing sense of our own sacred nature? We will explore spiritual guidance from nature and how this leads to environmental justice.

    Tuesday, July 5 – Building the Heart Muscle to Take on Threats to Earth: Pamela Haines. To build our muscles as climate justice activists, we will identify stretches involving listening and connecting, engaging in conflict and repair, listening for and speaking truth, facing grief, and cultivating hope and courage.

    Wednesday, July 6 - Living in Right Relationship with the Living World: Mary Ann Percy. Using Quaker contemplative practices and exercises from The Work That Reconnects (Joanna Macy, root teacher), we will begin to deepen intimacy with all beings, and to understand how our Testimonies of Unity, Equality, Integrity, Community, Simplicity, and Peace direct us toward harmonious and reciprocal relationships which respect the inherent integrity of the Earth community.  How might our lives change if we were to apply our Quaker Testimonies to the entire Living World rather than only to our relations with human beings?!

    Thursday, July 7 – A Climate Action Plan for Philadelphia Yearly Meeting: Ruth Darlington and Patricia Finley. How are Philadelphia Friends taking action on climate change, how can a yearly meeting and monthly meeting mutually support climate actions, and what can you take back to your yearly/monthly meeting? (5-6pm Eastern)

    Friday, July 8 – Climate Change, What Does Human Population Growth Have to Do with It?: Stan Becker and Richard Grossman. The world population grew from 2.5 billion in 1950 to 8 billion in 2022 and we’re adding about 200,000 persons per day. To be sustainable on this planet we must reduce both our individual impact and our numbers. With presentation, queries and worship-sharing we will probe these concerns.

  • Naturally Beyond Boundaries with Cai Quirk

    Society tries to force humans and the natural world into categories and boxes, but nature holds onto stories even when humans forget and erase. As a part of the natural world, humans also naturally expand beyond binaries. Through stories, photos, and poems from 'Transcendence’ and ‘Beyond Pink and Blue’ Cai Quirk will bridge gaps in societal beliefs in binaries, in gender as well as in humans' supposed separation from the natural world.

    Bio: Cai Quirk is a genderqueer/fluid multi-disciplinary artist who focuses on the intersection of gender diversity throughout history, its erasure, and contemporary reclamation and restoryation. Their upcoming book, ‘Transcendence,’ connects gender, mythology, and nature-based spirituality through photos and stories. They received bachelor’s degrees in music and photography from Indiana University. caiquirk.com

  • Ecological Grief: Engaging with the Emotional Impacts of Climate Change

     Climate warming stripes from: Show Your Stripes

    with Gayle Matson & Hayley Hathaway

    Ecological grief is all around us, whether we recognize it or not, we all carry it with us. Buddhist writer Joanna Macy writes, “Feeling pain for the world is as natural to us as the food and air we draw upon to fashion who we are. That pain is the price of consciousness in a threatened and suffering world. It is not only natural, it is an absolutely necessary component of our collective healing. The problem, therefore, lies not with our pain for the world, but in our repression of it.”

    This 90 minute experiential workshop is an introduction to the phenomenon of ecological-grief—what it is, how to engage with it, and why it's important. We’ll explore those tender places in our own hearts where ecological grief dwells and offer them sacred attention.

    Engaging in the grief process in a spiritual community supports resiliency and helps us be more deeply attuned to the actions we are called to take.

    Bios:
    Gayle Matson is a member of Chico (CA) Friends Meeting and co-clerk of the Pacific Yearly Meeting Unity with Nature Committee. A former clinical social worker and psychotherapist, she became interested in the phenomenon of ecological grief after moving to Chico in 2018—two months before the Camp Fire, the deadliest and most destructive wildfire in California’s history.  Since then, she has focused on the emotional impacts of climate change and has co-facilitated eco-grief groups for a faith-based climate action organization.

    Hayley Hathaway is Quaker Earthcare Witness' Communications Coordinator. She is passionate about the relationships between ecology and faith. She worships with Friends in Santa Fe, New Mexico and is active on local climate campaigns. Hayley is the former director of Casa de los Amigos, the historic Quaker center for peace and international understanding in Mexico City.

    Register here.

     

Hero: Homepage

Custom Hero component for the home page, includes email sign-up and social link options.

[shortcode]

Hero: CTA

Simple formatted text with a full width background color to draw attention to the Call to Action (CTA) button.

Components Library

Hero: Image Text

Full width image with a separate mobile image upload to optimize the crop. Optional formatted text as overlay with a fading background to ensure readability.

Hero: Slider

A full width image slider with separate mobile image upload for each slide to optimize the crop. Optional formatted text is shown as an overlay.

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.

Hero: Text Image

Focuses on content and cuts the fixed height image off starting from the outer side. Text can be positioned on the left or right side. Any image aspect ratio can be used and will extend outside the container if too wide.

List: Icons

Add any number of icons and optional text to highlight features or services. Optional link below icon. Includes a center option that will also wrap the icon in a colored circle.

List: Logos

Upload logos (gif, jpg, png or svg) that will line up centered. Allows links for each logo and has an optional card layout.

List: Social

Add your social media platform links and they will show up as predefined svg icons. Optional formatted text above the icons.

Slider: Images

Simply drop any images on the gallery field, order them by drag & drop and optionally add a caption per image. No need to worry about the photo selection as any image ratio will fit into the slider.

Testing caption here.
Another test caption
Third caption

Slider: Image Gallery

Drop any images on the gallery field, order them by drag & drop and optionally add a caption per image. Any image ratio will fit into the slider. It always covers the full width of the website container and comes with a thumbnail preview navigation.

Another test caption
Third caption
Testing caption here.

Slider: Images Centered

Drop images on the gallery field, order them by drag & drop and optionally add a caption per image. Crops images into a predefined ratio, centers the active image slide and crops the previous and next image.

Third caption
Testing caption here.
Another test caption

Publication

  • Test

    This issue of BeFriending Creation invites us to reconnect with the land, the trees, and the soil, to “find steady ground” in our spiritual practices and in our communities. Enjoy an issue filled with great Quaker writers and thinkers.

    Vol 32 Number 4
  • test

    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.

    Google
  • test

    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.

    Google
  • Test

    Lorem to the ipsum.

    Google