🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Feature v12

Feature section containing text that overlaps a background image.

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

How to

The Feature v12 component is used to display a block of text that overlaps an image.

To set the text position, use one of the feature-v12--{side} class modifiers:

  • .feature-v12--top -> text is on top
  • .feature-v12--bottom -> text is at the bottom
  • .feature-v12--left -> text is on the left
  • .feature-v12--right -> text is on the right

You can also change the text position at a specific breakpoint using one of the feature-v12--{side}@{breakpoint} class modifiers (e.g., [email protected]).

To set the offset amount (i.e., how much the text should overlap the image), use one of the .feature-v12--offset-{amount} responsive modifiers:

  • .feature-v12--offset-xs
  • .feature-v12--offset-sm
  • .feature-v12--offset-md
  • .feature-v12--offset-lg
  • .feature-v12--offset-xl

You can also modify the offset value at a specific breakpoint using one the .feature-v12--offset-{amount}@{breakpoint} responsive modifiers (e.g., [email protected]).

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us