https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component

A custom web element to easily add a GitHub Fork Me ribbon to your web pages!
https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component

css custom-elements fork-me github github-ribbon github-ribbons html html-css-javascript javascript js ribbon web-component web-components web-elements

Last synced: 18 days ago
JSON representation

A custom web element to easily add a GitHub Fork Me ribbon to your web pages!

• Host: GitHub
• URL: https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component
• Owner: MarketingPipeline
• License: gpl-3.0
• Created: 2022-03-29T21:26:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-09T20:52:48.000Z (about 2 years ago)
• Last Synced: 2024-07-30T21:02:36.805Z (3 months ago)
• Topics: css, custom-elements, fork-me, github, github-ribbon, github-ribbons, html, html-css-javascript, javascript, js, ribbon, web-component, web-components, web-elements
• Language: JavaScript
• Homepage:
• Size: 78.1 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GitHub-Ribbon-Web-Component



 

    


  Easily add a GitHub Fork Me button to any page!

  


   Show your support! 

  


   

    

  

  

    

  

   
  


A custom web element to easily add a GitHub Fork Me ribbon to your web pages!

## Example and usage

You can view a demo of this Web Component in use [here.](https://marketingpipeline.github.io/GitHub-Ribbon-Web-Component)

How to use GitHub Ribbon Web Component:

Add a ```github-ribbon``` element in your HTML document with your link etc like the example below -

```html

```

   include this [script](https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/blob/main/dist/github-ribbon-wc.min.js) in your HTML document.

         

     

###                                                                                                                    Options

Attribute

Meaning

Default

Required

link

The      link                                                               to your GitHub  repo / source code etc...

undefined

Yes

side

              Change the side of the ribbon, options are top-left, top-right, bottom-right, bottom-left 

top-right

No

message

Set                            your                     own      custom message instead   of  "Fork  me  on  GitHub" 

undefined

No

color

Change the   color  of the ribbon  background 

red

No

text-color

Change  the   text  color of the ribbon

#fff

No

new-window

If                    True, link with  open in a new window

False

No

     

      

  

fixed

If False  non fixed CSS will be applied

True

No

    

      

      

 

## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/GitHub-Ribbon-Web-Component)

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

See also the list of

[contributors](https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/graphs/contributors) who

participate in this project.

## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/GitHub-Ribbon-Web-Component)

This project is licensed under the GPL-3.0 License - see the

[LICENSE.md](https://github.com/MarketingPipeline/GitHub-Ribbon-Web-Component/blob/main/LICENSE) file for

details.