Lattice Web System
Overview of all the building blocks that make lattice.com and how to use them to create beautiful, consistent and scalable experiences.
Attributes are used for minor, unique, one-off style changes: adding a margin, hiding on tablet, limiting max, character count... Attributes can be applied to any selected elements in the Element Settings panel [D]
Base HTML tags are used to customize the default styles of core elements site-wide: headings, paragraphs, rich texts, images... You can find the full list of styled tags in the Style Manager panel [G].
Classes are used to style everything in a scalable and consistent way. We use the main class to define global rules and use combo classes to cover specific usecases, following this pattern: Main Class is Combo.
Components are reusable layouts and elements such as the nav and the footer. Modifying a component in one place will modify all of its instances everywhere, but they can also be uniquely customized using component properties
CMS elements are connected to our CMS collections and are dynamic. For filters and paginations, Finsweet's CMS attributes are used.
Our typography scale, from H1s to H5s. Always use headings in a descending order: H1 > H2 > H3...
You can use classes to style a heading to another heading's style. E.g: give a H2 a class of H3.
Jumbo
Headline
Heading one
Heading one
Heading two
Heading two
Heading three
Heading three
Heading four
Heading four
Heading five
Heading five
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
- This is an item
Lorem ipsum dolor sit amet praesent molestie facilisis molestie porttitor. Arcu aliqua hac bibendum venenatis volutpat sapien eros nunc nibh phasellus. Sagittis consectetur vel consectetur malesuada eleifend hac pretium nullam labore platea curabitur. Blandit do elementum viverra euismod mauris scelerisque interdum semper nunc a. Est iaculis risus nisi euismod ullamcorper luctus netus id vulputate dolore elit tempor maecenas lectus.
What’s a Rich Text element?
The rich text element allows you to create and format the following elements:
- Headings
- Paragraphs
- Blockquotes
- Images and videos
All of these elements are contained in this one rich text, instead of having to add and format them individually.
Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content.
- Drop it into any page
- Begin editing
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
You can also have blockquotes inside of rich text elements
Lorem ipsum dolor sit amet incididunt maecenas velit ultrices platea leo diam aliquam quisque. Dictum facilisi dapibus eleifend aliquam risus ut lacus porttitor. Integer magna lacus porttitor sed scelerisque rhoncus nec duis. Vel nisi adipiscing nulla lacinia morbi turpis do sapien mollis orci gravida massa molestie hac. Dui nullam leo phasellus lacinia mattis feugiat consectetur in nisi tellus.
Author, job title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
See Lattice
Discover Product
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Hendrerit a netus facilisis nibh fermentum dictum congue blandit. Et suspendisse praesent nec bibendum do massa nullam.Velit hac quisque lectus faucibus arcu velit adipiscing mollis hac condimentum.
Dui ornare nisl proin dui non magna iaculis dictumst. Tempus leo mi etiam magna dolore facilisi hendrerit faucibus duis eros faucibus ornare dolore. Purus consectetur adipiscing arcu scelerisque libero pulvinar netus. Blandit massa labore scelerisque vel do lacinia auctor.
Dui ornare nisl proin dui non magna iaculis dictumst. Tempus leo mi etiam magna dolore facilisi hendrerit faucibus duis eros faucibus ornare dolore. Purus consectetur adipiscing arcu scelerisque libero pulvinar netus. Blandit massa labore scelerisque vel do lacinia auctor.
Hendrerit a netus facilisis nibh fermentum dictum congue blandit. Et suspendisse praesent nec bibendum do massa nullam.Velit hac quisque lectus faucibus arcu velit adipiscing mollis hac condimentum.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Hendrerit a netus facilisis nibh fermentum dictum congue blandit. Et suspendisse praesent nec bibendum do massa nullam.Velit hac quisque lectus faucibus arcu velit adipiscing mollis hac condimentum.
Dui ornare nisl proin dui non magna iaculis dictumst. Tempus leo mi etiam magna dolore facilisi hendrerit faucibus duis eros faucibus ornare dolore. Purus consectetur adipiscing arcu scelerisque libero pulvinar netus. Blandit massa labore scelerisque vel do lacinia auctor.
Heading 2 - Medium 64/1.0
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
How to Build an HR Tech Stack That Drives Performance
Performance and Engagement: Better Together
HR’s Guide to Making Performance Management More Equitable
What’s a Rich Text element?
The rich text element allows you to create and format the following elements:
- Headings
- Paragraphs
- Blockquotes
- Images and videos
All of these elements are contained in this one rich text, instead of having to add and format them individually.
Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content.
- Drop it into any page
- Begin editing
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
You can also have blockquotes inside of rich text elements
Lorem ipsum dolor sit amet incididunt maecenas velit ultrices platea leo diam aliquam quisque. Dictum facilisi dapibus eleifend aliquam risus ut lacus porttitor. Integer magna lacus porttitor sed scelerisque rhoncus nec duis. Vel nisi adipiscing nulla lacinia morbi turpis do sapien mollis orci gravida massa molestie hac. Dui nullam leo phasellus lacinia mattis feugiat consectetur in nisi tellus.
Author, job title
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Lorem ipsum dolor sit amet proin ut dictum nisi augue. Vitae laoreet fusce a incididunt senectus aliqua aenean tristique non tortor phasellus libero.
Every tool you need to power your strategic HR
See how Performance connects with the rest of the Lattice platform.
Connect engagement data to performance metrics to understand the retention risk of your top performers.
Learn more
Integrate OKRs into performance management to create alignment and drive achievement against top business priorities.
Learn more
Run performance reviews to align employees on where they meet, exceed, or fall short of their roles' expectations.
Learn more
Seamlessly connect performance review cycle results into compensation decisions, creating fair and equitable pay outcomes.
Learn more
Seamlessly connect performance review cycle results into compensation decisions, creating fair and equitable pay outcomes.
Learn moreSeamlessly connect performance review cycle results into compensation decisions, creating fair and equitable pay outcomes.
Learn more
Run performance reviews your way.
Build a culture of continuous feedback.
Make 1:1s the most productive meetings on your calendar.
Publicly celebrate employee achievements.
Unblock direct reports and keep managers up to speed.
Run feedback cycles that work for your organization
Whether you run annual performance reviews, quarterly development cycles, project-based, or automated reviews, Lattice adapts to your needs.
Learn more
Ensure productive communication between managers and reports
Make meetings more effective by getting the context you need for a productive conversation
Learn more
Optimize performance through a culture of continuous feedback
Don’t wait until the annual performance review to get feedback from managers and peers
Learn more
Recognize and celebrate employee wins
With Praise, everyone can see that public recognition — directly in Lattice, in Slack, Microsoft Teams, and on in-office screens.
Learn more
Prioritize the most important work and clear obstacles
Ensure everyone is on the same page about progress toward goals, where your team needs help, and how everyone is feeling with Updates.
Learn more
