skip to content

Styleguide

Above are custom breadcrumbs, which is a list of links / text elements.

On most pages, the last element will be text, and before that will be links to previous pages. If you select “yes” breadcrumbs but do not enter a custom list, they will auto populate depending on the content type, and on the categories you’ve selected on the page itself.

Accordions

Accordions are made up of 1 accordion entry, with accordion items inside.

Each accordion item has a title, and body text, and can be reused on multiple pages.

  • 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.

    This is a markdown field and can have markdown styles

  • 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.

    This is a markdown field and can have markdown styles

Tables

There are three types of tables: Tables, Pricing Tables, and Article Tables.
To see the article page - which can also appear in guide chapters - see the article styleguide page

For each one, there are rows nested under the tables themselves, which contain the values to display.

This table has Column 1,Column 2,Column 3 columns and 2 rows

Plain Table

Column 1

Column 2

Column 3

Row One

Column 1 isValue 1

Column 2 isValue 2

Column 3 isValue 3

Row Two

Column 1 is yes

Column 2 is no

Column 3 is no

This table has 2 columns and 4 rows

Pricing Table

Plan A

$10/mo

$100/yr (Save $20/yr)

Plan B

$12/mo

$112/yr ( $32/yr)

Heading Row

Row 1

Plan A isValue 1

Plan B isValue 2

Plan A is yes

Plan B is50

Row 3

Plan A is no

Plan B is no

is yes

STYLEGUIDE: Pricing table CTA

This is a sample CTA for the pricing table

Test 1Test 2

This is the test 1 column in an article table

This is the test 2 of the article table

All CTA Banners

If you’re looking to add the “join 50,000 creators” banner, you can reuse the one that’s already made by searching for it.

Test Title

STYLEGUIDE: Dark, default size, primary-l button

Test description Pharetra pretium, auctor amet, mauris at posuere. Sit rutrum nullam augue mattis.

Test Button Primary L

Join Our Team

STYLEGUIDE: Light, medium cta, plain button

Pharetra pretium, auctor amet, mauris at posuere. Sit rutrum nullam augue mattis.

Test Button Plain S

STYLEGUIDE: White Small CTA

Test description

Test Button Plain S

STYLEGUIDE: light, compressed, small primary button

Get started with Podia by signing up for a free trial.

Test Button Primary S

STYLEGUIDE: light, slim-compressed, link

TEST: light, slim-compressed, link

Test link variant

STYLEGUIDE: dark, slim, no link

TEST: dark, slim, no link

STYLEGUIDE: Light, default, left aligned, secondary button

At Podia, we’re building the most creator-friendly platform on the planet to help people sell online courses, memberships, and digital downloads. And the #1 reason people cite for using us? Creator-friendliness.

Test Button Secondary L

STYLEGUIDE: Light, compressed, no link

Send us an email to hello@podia.com or reach out on live chat, we’d be happy to help.

STYLEGUIDE: Light, small, left, secondary small button

Our first council meeting was held on July 16th. It started with introductions, and we began to brainstorm ways that we could work together to push our mission forward.

Test Button Secondary S

STYLEGUIDE: Light, compressed, white cta

TEST: Light, compressed, white cta

Test Button Secondary S

Cards

Cards, like other content, will fill the layout of the layout row they are in.
All cards below are in a 3-column layout, but they will stretch if placed in a 50-50, or 100.

Spencer Fry headshot

Pretitle

This card has no heading and a very large image.

card

Card with SVG image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Pretitle

Heading Medium

Is creating an online course right for you? In this chapter, we’ll look at who can benefit from producing an online course and what the perks of online education are for entrepreneurs and their customers.

Learn More
Portrait of Spencer

Weekly Demo

Join our founder and CEO, Spencer every tuesday at 2PM ET for a live demo

Learn more

Component Image/Motion

Image / Motion components can be one of the following:
an image, or an embedded iframe (like on the free tools, or features/embeds page)

Videos can be added, but need to be within a video hero, see hero section.

People in a meeting prioritizing tasks with post its

Text

The text component is very versatile, with lots of optional fields, depending on what you need.

Test heading XL

This is some test description text

Pretitle

Medium Heading

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. 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.

Creator story

Becky was paying multiple platforms to host her courses and downloads, and when she planned to launch a membership, she knew it was time to simplify. Now, Podia has saved her thousands.

Unordered list

  • Who should create an online course and what are the benefits?
  • How to come up with ideas for your online course
  • Starting with success: How to plan your course content
  • How to build awesome online course content (with examples)
  • The pitch: Pricing and packaging

Ordered list

  1. Digital vs. Physical products: Which should you sell online?
  2. 19 examples of profitable digital products to sell online
  3. Digital product ideas and tips for creators in need of inspiration
  4. How to sell digital downloads from your own website
  5. The comprehensive guide to pricing digital products and profiting

Alphabetical list

  1. The comprehensive guide to pricing digital products and profiting
  2. Five UI tweaks to boost trust on digital download sales pages
  3. Four steps to launch your digital download from scratch
  4. Four ways to prevent digital product piracy and theft
  5. Tips to get more sales & downloads for your digital products

Plus list

  • Videos
  • Articles
  • Guides
  • Playlists
  • Tutorials
  • Walkthroughs

X list

  • Joker
  • The Riddler
  • Penguin
  • Poison Ivy
  • Harley Quinn
  • Clayface
  • Man-bat
  • Ras Al Ghul
  • Mr. Freeze

Form Banners

There are two 3 types of form banners, and all three are all ready made!
demo signup, newsletter signup, newsletter mini

(see resources landing page for how the mini renders in a column)

Weekly Demo

Save your spot

Join our demo and see exactly how Podia can help your business thrive.

Newsletter

Join our newsletter

Join thousands of creators receiving our weekly articles about launching, growing, and thriving as a creative entrepreneur.

Newsletter

Join our Newsletter

Join our newsletter, via "resource landing page" sample active campaign tag

Heros

Heroes are often 70-30, or 30-70 (depending which side you want the text on), but can also be 50-50, etc. That layout value is set on the “hero” component itself, not on the layout row containing it - that should be set to 100.

Heroes can have a background or be transparent, and can feature an image or a video.

Test pretitle

Test heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Test Button Plain S
Lady working at home with a laptop

Test Pre title

Heading

  • 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.

Image Heroes

Image heroes take 3 forms: One image over a gray circle, stacked images over a gray circle, and full width background image, like on the reviews page. They can have an optional quote.

The first two styles (with the gray circle) should almost always be placed in a 50-50 layout row, whereas the full width image hero should be in a 100 row.

Pretitle

Heading

This is a text component, that often pairs with the Image Hero, in a 50-50 row. It can be centered vertically (like this one) or aligned with the top of the image hero.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

- Attribution

Test Button Plain S

Pretitle

This is a combo block, with special 2-col

It makes it so that the first element (this one), spans across two columns, and everything after this element is placed in two columns. The other option for a combo block is a regular two column, where all the nested components automatically get placed into two columns (with no header to span over the top).

Heading small

This is text, not a description, you can tell because it is black and not dark gray.

I absolutely love Podia’s user interface - it is extremely intuitive and easy to navigate as the creator. I also love that they keep their product simple, there are no hidden upcharges, only one flat investment each month and you can create as many products as you want.

Amanda Boleyn, Entrepreneur

List of Resources

Heading M, 33-33-33, blog

Videos, 25-25-25-25

Minimal, limit to 9, blog posts

Guides

How to create an amazing membership website: The complete guide

This step-by-step guide contains everything you need to know about building and launching an online membership business.

What you'll learn

  1. What is a membership, anyway?
  2. Choosing a membership model: 8 examples that work
  3. Setting a price for your membership
  4. Choosing the best membership software and tools
  5. Marketing and maintaining your membership website

How to sell digital downloads & online products for passive income

This guide will teach you how to create and sell a digital download from end-to-end, whether it's your first time opening an online store or you're a seasoned creator.

What you'll learn

  1. Digital vs. Physical products: Which should you sell online?
  2. 19 examples of profitable digital products to sell online
  3. Digital product ideas and tips for creators in need of inspiration
  4. How to sell digital downloads from your own website
  5. The comprehensive guide to pricing digital products and profiting
  6. 5 UI tweaks to boost trust on digital download sales pages
  7. 4 steps to launch your digital download from scratch (+ Free checklist)
  8. 4 ways to prevent digital product piracy and theft
  9. 3 tips to get more sales & downloads for your digital products

How to create, sell, and profit from an online course in 2022

This guide is everything you need to know about creating, launching and selling a course this year.

What you'll learn

  1. Who should create an online course and what are the benefits?
  2. How to come up with ideas for your online course
  3. Starting with success: How to plan your course content
  4. How to build awesome online course content (with examples)
  5. The pitch: Pricing and packaging
  6. Product launches vs. Evergreen sales
  7. Email marketing for online courses
  8. Writing an online course sales page that converts

Quotes

Spencer Fry headshot

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.

Attribution
Company Name

Reviews

Reviews can have stars at the top, small or large, for large stars set the min width of the image to 180. The text can be different sizes, and there can be a button/link at the bottom, or a logo that links to capterra etc.

“I can say so many good things about Podia. It has helped me build my business with so much ease. I love how simple it is to build a course. This business is ever-growing with new updates coming out almost weekly it feels like! I am always so excited to see what’s new! The customer service is absolutely amazing! I love this company!”

— Gigi D,
Marketing and Advertising

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

Test Button Plain L

Playlists

To embed a playlist, just add a playlist and it will format into a 4-column row.

Thumbnails

These are essentially another card style, that can have an image at the top and text below.