Display Class

Display classes are designed for extra-large text and are typically set using the vw unit, ensuring consistent scaling across all devices. However, in some cases, you may want the text to remain a fixed size. To achieve this, display classes are sometimes paired with custom classes, allowing for specific adjustments to individual text elements.

Note: Occasionally, even when an element is positioned above a heading text without overlapping, the heading's bounding box may still block the element. This happens because the line height is set to 1, which, for some fonts, can be smaller than the actual text size. To resolve this, it's best to set the element's position to relative and assign it a z-index higher than the heading.

Default Heading Styles

All heading text comes with default styling to ensure consistency across the design, even without a class. However, without a class, headings won't be responsive, so you'll need to add a class to make them adaptable to different screen sizes.

Adding a class to a heading not only makes the text responsive but also helps maintain SEO-friendly structure while allowing you to customize its size. For instance, you might want an H2 heading to appear smaller while retaining its H2 tag for SEO purposes.

Default Paragraph Style

The same principle applies to paragraphs. However, the default styles aren't applied directly to the paragraph element itself; they come from the Body's default styles. The only exception is the margin, which is part of the Paragraph's default styling.

Center Align Text

If you need to center a text, you can simply add a Center Align class.

Image Styles

Classes styling for images are very simple, and there's not that many of them.

Post Thumbnail Preview

Client Image

Post Main Image

Image Result

Rich Text Style

The same principle applies to paragraphs. However, the default styles aren't applied directly to the paragraph element itself; they come from the Body's default styles. The only exception is the margin, which is part of the Paragraph's default styling.

Post Main Contents

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

$(document).ready(function(){
  $('input[name="filter"]').change(function(){
    var checked = $('input[name="filter"]:checked');
    if (checked.length > 0) {
      var filters = [];
      checked.each(function(){
        filters.push('.' + $(this).val());
      });
      var filter = filters.join('');
      $('.items').find('.item').hide();
      $(filter).show();
    } else {
      $('.items').find('.item').show();
    }
  });
});

‍

Don't worry about the code, it's just for preview :)

Text link

Bold text

Emphasis

^Superscript

_Subscript

How to Add your own Dropdown Menu

I add this because I made them myself manually, instead of using Webflow's premade navbar layout, so, it's not straight forward to get it working properly. However, you can duplicate or copy and paste the existing one and then change the contents. This tutorial is just in case if you accidentally deleted it and have no way to undo it.