3F Design v1.126.1
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
  • Components

    • Accordion
    • Alerts
    • Announce
    • Button
    • Byline
    • Calculate
    • Card
    • Datatable
    • Date
    • Embed
    • Fade
    • Feedback
    • Focus mode
    • Form
    • Hero slider
    • Icon
    • Image
    • Inline
    • Loading
    • Magazine
    • Map
    • Modal
    • PDF
    • Quote
    • Ribbon
      • Examples
        • Cards
        • Video
        • Gallery
      • API
    • 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

# Ribbon

Component name: <v-ribbon>

# Examples

# Cards

# Video

# Gallery

# API

Name Type Description Default
color String Sets the background variant color for the v-ribbon wrapper.

Valid value: Color variant name or HEX color code
primary
position String Where to position the ribbon

Valid value: left or right
right

Notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.

← Quote Search →