UI Components
Buttons
Button Variants
Choose appropriate button styles based on hierarchy and importance.
Button Sizes
Use appropriate button sizes based on context and importance.
Button Types
Buttons can be rendered as regular buttons, anchor tags, or Next.js Links while maintaining visual consistency.
Full Width Button
Full width buttons are useful for mobile interfaces or when you want to emphasize a primary action.
Cards
Card Variants
Default Card
This is the default card variant with a subtle shadow and border.
Outlined Card
The outlined variant puts emphasis on the border with no shadow.
Elevated Card
The elevated variant has a more pronounced shadow for emphasis.
Cards with Icons
Project Management
Cards can include icons to provide visual cues about their content.
Quantity Surveying
Icons help users quickly identify different card types.
Interactive Components
Interactive Buttons
Interactive Card
Interactive Card
This card is clickable through an onClick handler.
Link Card
This card links to another page using Next.js Link component.
Card with Footer
Cards can have a dedicated footer section for actions.
Card Usage Guidelines
Cards should maintain consistent padding, use appropriate spacing, and follow a clear visual hierarchy. They should be used to group related content and provide a clear visual distinction between different sections. Icons should be relevant to the content and enhance understanding, not distract from it.
Typography Components
Heading Component
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Use the Heading component with appropriate level props for semantic HTML structure.
Text Component
This is standard body text used throughout the website. It provides excellent readability on all devices.
This is smaller secondary text used for supporting information, captions, and metadata.
This is bold body text for emphasis within paragraphs.
Use the Text component with variant and color props for consistent typography.
Layout Components
Section & Container
The Section and Container components provide consistent spacing and layout structure across the site.
Container Content
Outer border represents Section, inner border represents Container
Component Guidelines
When creating or using components, maintain consistency with the established design system patterns. Ensure components are accessible, responsive, and follow the visual language of the Greenwave Projects brand.
Back to Design System Home