MoreLesson 218Free preview

Pricing Table

This lesson is part of How To · All levels

Summary

The pricing table compares several price packages in an adjacent column, complete with a list of features and subscription buttons. Clear structure helps potential customers choose packages quickly. With a flexbox or grid, columns can be aligned and stacked automatically on a small screen.

Key points

Each column usually contains the name of the package, price, feature list, and action button
Mark the flagship pack with a special class to stand out.
Use a grid or flexbox to keep the height of the column parallel
On the small screen, stack columns to keep the text reading

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.