Ipas web style guide
Consistent styling is important to optimize the user’s experience. In addition to the out of the box modules from Divi Builder, our Divi Library has styles for modules, rows, and sections that can be added to any page.
Detailed instructions for how to edit the site are still in the ipas.org guide, found in our ipas.org project folder.
Text styling
Quotes
Buttons
Photos
Content highlights
Layouts
Text styling
- Page titles are automated as H1 so page content should always start with an H2.
- Always use consective heading styles (i.e. H5’s should only be applied if below an H4).
- Do not use a bold or italic style with heading styles. These typefaces already have a weight applied.
H1-automated page titles (52px/2.6em, 1 em line height)
H2—Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. (32px/1.6em, 1.2em line height)
H3—Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. (20px/1em, 1.2em line height)
H4—Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. (20px/1em, 1.2em line height)
This is paragraph with bold, italic, and a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit libero volutpat sed. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Nunc sed augue lacus viverra vitae congue eu consequat ac.
This is paragraph with bold, italic, and a link:
- Here’s a bullet
- Second bullet
- Third bullet
This is paragraph with bold, italic, and a link:
- And numbered
- Second bullet
- Third bullet
Standard quote styling. See Quote styling modules below. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
Climate Justice
Larger intro adds visual interest. New Section—Add from Library—Intro text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Ut lectus arcu bibendum at varius vel. Nec ullamcorper sit amet risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla at volutpat diam ut venenatis tellus in. Sed velit dignissim sodales ut eu. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Eget nulla facilisi etiam dignissim. Urna id volutpat lacus laoreet non curabitur gravida arcu. Sit amet consectetur adipiscing elit pellentesque habitant. Volutpat blandit aliquam etiam erat velit scelerisque in dictum. Quis lectus nulla at volutpat diam ut. Aliquam vestibulum morbi blandit cursus risus at ultrices mi.
December 25, 2023
In the nearly two years since the U.S. Supreme Court struck down the constitutional right to abortion in the United States, the abortion landscape has become fragmented and increasingly polarized. In more than half of the 50 U.S. states, abortion is now completely banned, heavily restricted or under legal threat.
Harmful U.S. Policies
December 25, 2023
A ‘legend and reference point’ for reproductive rights in Africa, Brookman-Amissah’s 30 years of trailblazing work improved abortion access across the continent.
Climate Justice
Q&A formatting. New Row—Add from Library—Q&A questions
Why did you decide to do this research project?
Heron: As a bisexual agender parent of a tween, I am hyper-aware of the need for culturally competent sex ed.
Paige: I am always looking for ways to more intentionally work across movements, particularly repro and queer movements. This research project offered the opportunity to do just that while shining a light on communities that get overlooked in policy and advocacy spaces.
Media contact. New Module—Add from Library—Media fore more info
For more information, contact [email protected].
Quote styling
New Module—Add from Library—Pull quote-small—Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
— Quote attribution in bold
“
New Module—Add from Library—Pull quote-large—Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
New Module—Add from Library—Pull quote box
Large quote section. New Section—Add from Library—Gray Full Quote
White supremacy in global health
“In the global health and human rights community, where I sit professionally, there’s been a lot of discussion in the last few years about decolonizing global health,” writes Ipas President and CEO Anu Kumar in a piece published by Think Global Health. “What we don’t talk about explicitly enough, however, is how white supremacy operates in this sector… The linkages between colonialism and patriarchy, between racial justice and gender justice are undeniable. They have—and still do—oppress Black and brown women.” Read her piece
Use for almost all cases
New Module—Add to Library—Standard orange button
Use when on orange backgrounds
New Module—Add to Library—Transparent White-button
Use on resource pages to direct to publications in other languages.
New Module—Add to Library—Blue-French (Spanish, English, Portuguese)
Fundraise Up Donate button triggers donate form overlay
New Module—Add to Library—FUP donate
Photos
Image sizes
If photos are not sized correctly they can slow down site performance and will break many of our automated module styles. All page feature images (header photos) must be sized exactly 1280 x 533 px at 72 dpi. Additional photos should be sized at a maximum of 1920px wide at 72dpi.
Photo carousel slideshow: New module—Add from Library—Photo carousel
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Ut lectus arcu bibendum at varius vel. Nec ullamcorper sit amet risus. (photo by xyz for Ipas)
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Ut lectus arcu bibendum at varius vel. Nec ullamcorper sit amet risus. (photo by xyz for Ipas)
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Ut lectus arcu bibendum at varius vel. Nec ullamcorper sit amet risus. (photo by xyz for Ipas)
Image and photo credits New Module—Add from Library—Image Credit. You might have to adjust spacing in the Design tab > Margins
AP PHOTO/ALEX BRANDON
Content highlight or promo styles
Colored block rows: New row—Add from Library—Color block row-orange OR Color block row-blue
- These are text modules with a shortcode that contains the post ID [ids=”84395“]
- Replace the post ID (ID highlighted in orange) with the post you want to link to
- The post ID appears in the URL when editing the post: Example: https://ipas.org/wp-admin/post.php?post=4038&action=edit
- The text on the left is generated from the “Caption text for Story or Promo” entry from the news story’s back-end.
Individual news item row. Can adjust to 2 or 3 columns: New row—Add from Library—News row
- These are text modules with a shortcode that contains the post ID [ids=”84395“]
- Replace the post ID with the post you want to link to
- The post ID appears in the URL when editing the post: Example: https://ipas.org/wp-admin/post.php?post=4038&action=edit
- The text below is the post title.
Country info box in a 2-column row. See all where we work pages. Update with country logo and information. New row—Add from Library—Country info box
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
Program of Ipas Latin America and the Caribbean
Leadership: María Antonieta Alcalde
Office: Mexico City
Online: ipasmexico.org
Highlight info box in a 2-column row. New row—Add from Library—Highlight info box
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
Our impact
In 2022, we supported 1,429 access points for self-managed abortion with pills
Animated number counter. New module—Add from Library—Number counter
- Edit number in Text—Number
- Edit text in Text—Title
- Enable optional percentage sign in Elements tab
people received abortion services
Charts: These need to be created with “Data Tables by Supsystic.” Find in the dashboard on the left.
- Create a data table with the data
- Create a chart from the data
- Customize by clicking “Show Values into Diagram”
- Copy and paste the embed code into a text module
[supsystic-table-diagram id=’11’]
[supsystic-table-diagram id=’12’]
[supsystic-table-diagram id=’10’]
Slider that shows the last 10 news posts. New module—Add from Library—News post slider.
Personal feature story: New row—Add from Library—Personal story feature
Working on this issue throughout the years, we have learned that when we work with a young woman or adolescent girl on this issue, the involvement of the men in her family, and her partner, is needed.
LAXMIDHAR SINGH, assistant program manager, Ipas Development Foundation
Layout styles
Visual block link to content. Great for overview parent pages. See Crisis Settings page. New module—Add from Library—Image card style
Bangladesh
Divi Library: Image card style
Bangladesh
Divi Library: Image card style
Use accordians for low priority content to shorten length of the page. New module—Add from Library—Accordian-gray
Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet tellus cras adipiscing. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam.
Orange dash divider: New row—Add from Library—Orange Dash Row
Bold number squares to highlight lists. Can also use with anchors links. See in use: Climate research and Bi/Pan CSE research. New row—Add from Library—row of 5 bold squares
1
Lorem ipsum sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris
2
Lorem ipsum sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris
3
Lorem ipsum sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris
4
Lorem ipsum sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris
5
Lorem ipsum sit amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris
Breadcrumbs to be placed at the top of child pages. See where we work pages, Bi/Pan CSE research: New section—Add from Library—Breadcrumb
Full-width promo section. See Ending abortion stigma, Monitoring gender and human rights, and Making abortion legal. To edit:
- In the section settings: Replace photo in the Background tab
- In module settings: Edit content.
- In the row settings: Adjust background to optimize legibility over photo.
New section—Add from Library—Full-width promo
Beyond the individual: Research shows abortion access has widespread benefits
Our research shows that when abortion is legal, it not only improves people’s own quality of life, but that of their families, communities and even countries.
In the nearly two years since the U.S. Supreme Court struck down the constitutional right to abortion in the United States, the abortion landscape has become fragmented and increasingly polarized. In more than half of the 50 U.S. states, abortion is now completely banned, heavily restricted or under legal threat.
Entashata strives to bridge gaps in education, women’s rights, and reproductive health in his community in Loita. The organization’s commitment to education resulted in an annual campaign to enroll boys and girls in schools, boasting over 50 girls supported completing their secondary education.
In Nigeria, getting a safe abortion is already an uphill battle. But for women with disabilities, it can be nearly impossible. With support from the Ipas Collaborative Fund, the locally based SAIF Advocacy Foundation is paving the way to ensure that everyone, regardless of ability, can access the quality abortion care they have a right to.
In response to Ipas Bolivia’s testimony at an Inter-American Commission on Human Rights (IACHR) hearing, Bolivian government officials have committed to take action to address the child marriage crisis for girls in Bolivia.
The year 2023 will go down in history as difficult for humanity. Yet Ipas teams around the world persevered, landing important victories for abortion access and expanding reproductive justice in partnership with activists, health workers, educators, community leaders and more.
In the wake of a destructive 6.4 magnitude earthquake in western Nepal in November, pregnant women and new mothers are struggling for survival without proper shelter and health care. Knowing that essential reproductive health care is often impossible to access in crisis settings, Ipas Nepal is rolling out a multifaceted response.
December 17 marked five decades of the Helms Amendment, which restricts the use of U.S. foreign assistance for abortion “as a method of family planning.” But in practice, the policy has been implemented as a complete ban on abortion, even in countries where it’s legal.
Ipas is proud to continue supporting community-based efforts to advance reproductive justice with the unveiling of 16 new recipients of the Ipas Collaborative Fund for 2024.
No matter the cause, humanitarian crises often mean an increase in sexual and reproductive health needs—yet access to safe abortion remains one of the most forgotten of those needs. Ipas Democratic Republic of Congo is making sure that access to abortion is included in humanitarian aid response to the devastating armed conflict in North Kivu.
A ‘legend and reference point’ for reproductive rights in Africa, Brookman-Amissah’s 30 years of trailblazing work improved abortion access across the continent
The United States is violating human rights by denying legal access to abortion—and should take immediate action to end the criminalization of abortion at the federal, state and local levels. This is the newly released conclusion of the United Nations Human Rights Committee in response to testimony from Ipas and partners in October.
Professor Mahmoud Fathalla, former FIGO president, boldly spoke the truth
Climate change is hitting Malawi hard. In recent years, torrential rains, destructive winds and mudslides brought on by a series of cyclones have had a devastating impact on the country’s people and its agriculture-based economy.
Ipas Africa Southern Region (ASR) joined the world to commemorate the International Day of the Girl Child reflecting on this year’s theme: Invest in Girls’ Rights: Our Leadership, Our Well-being.
The United Nations General Assembly on 19 December 2011, adopted Resolution 66/170 declaring October 11 as the International Day of the Girl Child, recognizing girls’ rights and the unique challenges girls face around the world.
Ipas Africa Southern Region (ASR) has taken a significant leap forward by registering as a nonprofit organization in South Africa, governed by a board of trustees.
Ipas partnered with local group PACIDA to tackle the impacts of climate change on reproductive rights. The solutions—generated by the people most affected—are helping build resilient communities.
Supporters of abortion rights around the world—including Ipas staff and partners—are marking International Safe Abortion Day today with diverse in-person and online actions.