This page previews some of the site’s typography styles, and block combinations/CSS classes while we work on the styles.
H1 Headline – big regular
H1 Headline – hero bold
H1 Headline – overlaid image
H1 Headline – Regular – size is the default, and weight comes from header settings.
H1 Headline – Medium – size is the default and weight comes from header settings.
H1 Headline – Bold – size and weight is the default.
H2 Headline
H3 Headline
H4 Headline
This is a big paragraph using the ‘Medium’ font size in the editor.
This is a big paragraph using medium text – the size is the default and the weight comes from the paragraph settings.
This is a medium paragraph – the size is the default.
This is a small paragraph – the size comes from the paragraph settings (manually added 14px font size)
Cover block – the header is switched to Noto Sans when nested in a Cover block:

Call to action block with header
Explore
More

Investigations

News Analysis
Header + .accent-header class
Header with the accent header class
Media & Text Block + .drop-shadow class:

Latest Investigation
What Trump’s Hardline Immigration Policy Means for Crime on the US-Mexico Border
The president-elect’s promise to clamp down on undocumented migrants could play into the hands of criminal groups who stand to profit from higher prices and fresh opportunities.
Header with accent-header class
subtopic-block to show a section navigation. This is made up of a group block containing columns, headings and list blocks.
Drugs
- Cocaine
- Synthetic Drugs
- Heroin
- Marijuana
- Fentanyl
- Methamphetamine
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 1
Title of the Chapter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus urna, vulputate at convallis hendrerit, mattis id mi. Nulla mauris justo, sodales vitae sodales nec, fermentum at elit. Proin condimentum risus sed venenatis mollis. Donec auctor euismod sodales. Donec sodales congue metus, sit amet tempor odio maximus in. Ut vestibulum nisl a maximus scelerisque. Donec aliquam eleifend metus, eget iaculis ante vestibulum id. Nulla facilisi. Nullam interdum sagittis accumsan. Phasellus egestas elementum enim nec condimentum. Sed mattis purus odio. Curabitur vehicula rutrum porttitor. Phasellus tempus dui id turpis fermentum, auctor dictum mauris mollis.
Curabitur orci ipsum, sodales vel ullamcorper sit amet, porta sed leo. Curabitur mattis lorem lectus, eu auctor felis mattis sit amet. Aliquam nibh justo, pharetra vel gravida sit amet, dictum vel massa. Sed pulvinar ante turpis, at lobortis urna pharetra in. Nulla facilisi. Mauris neque magna, gravida nec consequat sit amet, sagittis nec neque. Duis et faucibus arcu. Duis ultricies pharetra mauris, sed volutpat nulla dignissim vel.
Explore other topics
Banner Blocks
Banner blocks 1.1 – Media & Text block with drop-shadow CSS class; Homepage Posts block with chapter-stories-list CSS class.
Banner blocks 1.2 – Media & Text block + drop-shadow CSS class; Header block with accent-header class, static paragraph blocks.

Mexico’s Laws to Regular Chemicals Work on Paper But Not in Practice
How Precursor Chemicals Sustain Mexico’s Synthetic Drug Trade • Chapter 7
Mexico’s regulations concerning precursor chemicals is strong on paper, but rampant corruption means this is essentially meaningless. Mexico’s regulations concerning precursor chemicals is strong on…
Banner blocks 1.3 Media & Text block + drop-shadow CSS class; Homepage post block.

Investigation Update
Ecuador Profile
Ecuador is one of the region’s most significant drug trafficking hubs, used to dispatch Colombian and Peruvian cocaine to Europe, Mexico, and Central America.
Banner blocks 2 – Group block + .drop-shadow CSS class. Columns block; Header block + .flag-header class; Header block + .accent-header class; static blocks.
Profile
Héctor Rusthenford Guerrero Flores, alias ‘Niño Guerrero’
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus urna, vulputate at convallis hendrerit, mattis id mi. Nulla mauris justo, sodales vitae sodales nec, fermentum at elit. Proin condimentum risus sed venenatis mollis. Donec auctor euismod sodales. Donec sodales congue metus, sit amet tempor odio maximus in. Ut vestibulum nisl a maximus scelerisque. Donec aliquam eleifend metus, eget iaculis ante vestibulum id.
Latest update February 15, 2023
Banner blocks 3.1 – Group block + drop-shadow CSS class. Columns block; Header block + flag-header class and static blocks on the left; Homepage Posts block on the right.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus urna, vulputate at convallis hendrerit, mattis id mi. Nulla mauris justo, sodales vitae sodales nec, fermentum at elit. Proin condimentum risus sed venenatis mollis. Donec auctor euismod sodales. Donec sodales congue metus, sit amet tempor odio maximus in.
Banner blocks 3.2 Media & Text block + drop-shadow CSS class; Header block + accent-header CSS class; static paragraph.

Columbia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus urna, vulputate at convallis hendrerit, mattis id mi. Nulla mauris justo, sodales vitae sodales nec, fermentum at elit. Proin condimentum risus sed venenatis mollis. Donec auctor euismod sodales. Donec sodales congue metus, sit amet tempor odio maximus in.
Homepage Post block + chapter-stories CSS class.
