3F Design v1.124.4
Documentation
Playground
Changelog
Guides
GIT (opens new window)
NPM (opens new window)
Documentation
Playground
Changelog
Guides
GIT (opens new window)
NPM (opens new window)
  • General

    • Getting Started
    • SEO Recommendations
    • Template Syntax
  • Layout

    • Page layout
    • Navigation
    • Hero
    • Footer
    • Grid
    • Utilities for layout
    • Color variants
      • Usage examples
        • Card
        • Ribbon
        • Tag
  • Components

    • Accordion
    • Alerts
    • Announce
    • Button
    • Byline
    • Calculate
    • Card
    • Datatable
    • Date
    • Embed
    • Fade
    • Feedback
    • Focus mode
    • Form
    • Icon
    • Image
    • Inline
    • Loading
    • Magazine
    • Map
    • Modal
    • PDF
    • Quote
    • Ribbon
    • Search
    • Searchable select
    • Searchable select address
    • Signup price
    • Stack
    • Tabs
    • Table
    • Tag
    • Text
    • Toast
  • Compositions

    • Article
    • Login
    • Discipline specific content
    • Display options and filtering
    • Paywall
    • Chat
    • Card content layouts
    • Who is who
    • Zig zag
    • Search results
    • Contact page
    • New membership signup
    • 3F en fagforening for mig
    • Hero slider
  • Utilities

    • Data
    • Cookies
    • Fetch
    • Helpers
    • Internet Explorer
    • Render
    • Scroll-to
    • Session timeout
    • Tooltip
    • Tracking

# Color variants

primary
#EC1C24
secondary
#01426A
focus
#0084FF
success
#04AE3A
success-light
#DAF3E2
danger
#E01836
danger-light
#F9DBDC
warning
#E18B1A
warning-light
#FFEDB2
dark
#282828
gray-dark
#545454
gray
#E8E8EC
light
#F2F2F4
white
#FFFFFF

# Usage examples

Some components can be colored using the above variants. See examples below:

# Card

# Ribbon

# Tag

← Utilities for layout Accordion →