It’s a new month which means we’ve made updates to improve Relume. Happy September Component Day!

Here's what's new:

Component Improvements

{{TeamKalebDamianMariaJono}}

In recent months, our team has focused on refining and refactoring our Figma and Webflow component library to improve its quality, usability, and performance, paving the way for future developments. Here’s what we’ve updated:

Introduced Tagline & Tags

• We've introduced global controls for taglines and tags in Webflow and Figma, enhancing the consistency and scalability of styling these elements across your projects.
• In Webflow, text-style-tagline now allows you to control the tagline text style globally. New tag classes include tag, tag is-text, tag is-alternate, and tag is-text is-alternate bring a cohesive system to category tags similar to Buttons in Client First.
• In Figma, we’ve introduced a text style for Tagline and have added the Tag element as a global component.

SEO Optimisations

• We’ve improved our heading structures for better SEO, with well-defined hierarchies to enhance search engine accessibility.

Consistent Heading Classes

• In Webflow, all headings now have a specific Heading Style class, like heading-style-h3, ensuring consistent control over your headings. Previously some headings were only using the HTML heading tag without any class.

Consistent Spacing & Structure

• In Webflow, consistent spacing and structure rules are now implemented across all components. While this might require a few more nested divs, it’s a step toward significant improvements in managing spacing at a global level, which are coming in the near future.
• In Figma, we've standardised our components by using auto-layout gaps instead of occasionally relying on padding, which was most noticeable in button groups. This change allows you to quickly view and adjust the applied spacing values.

Enhanced List Usage

• In Webflow, lists are now used more consistently across our components for better content organisation and efficiency.

Alternate Form Inputs

• We’ve added an alternate form input element, making it easy to switch between light and dark themes.
• In Webflow, adding is-alternate as a combo class to your form inputs now allows you to switch between light and dark themes.
• In Figma, switching the variant to Alternate on a form input allows you to switch between light and dark themes.

Custom Code Inheritance

• In Webflow, a tweak to the custom code in our Global Styles component now allows text color to inherit from the parent.

Improved responsiveness in Figma

• We’ve tidied up our Figma components to better scale on mobile. This includes repeatable list elements like tags and logos which will now wrap onto a new line if they reach the bounds of their frame.

To keep up-to-date, be sure to clone the latest Style Guide version in Webflow and download the latest Figma Kit. All components have been updated and are ready for use.

React Library v0.5.0

{{TeamRobNour}}

The React team has released 55 new components this month. That makes 355 Relume components available in React.

The Relume react library is built with React, Tailwind & Typescript and they are available to download for free in the React Library.

New Section Highlights

• 3 new Contact forms Contact 2, Contact 3, Contact 4
• 4 new blog pages Blog 1, Blog 5
• 6 new CTA’s CTA 6
• 3 new FAQ’s FAQ 5
• 8 new Headers Header 10, Header 11, Header 17
• 9 new Layouts Layout 5, Layout 14
• 3 new Navbars Navbar 8, Navbar 9, Navbar 10
• 10 new Pricing Pricing 6, Pricing 11
• 4 new Teams Team 4, Team 7
• 5 New Testimonials Testimonial 4, Testimonial 5, Testimonial 6

Read the full v0.5.0 Changelog.

‍

Figma Kit Update (V2.6)

{{TeamKalebJonoDamian}}

We have updated our Relume Figma Kit with improvements to the components, which is available in both desktop and mobile variants. To receive the latest update, visit the Figma Library in your dashboard.

Written by Kaleb Jae & Rob Austin

Edited by Adam Mura