https://github.com/collective/volto-block-banner

A simple volto block add-on for a banner.
https://github.com/collective/volto-block-banner

Last synced: 4 days ago
JSON representation

A simple volto block add-on for a banner.

• Host: GitHub
• URL: https://github.com/collective/volto-block-banner
• Owner: collective
• License: mit
• Created: 2022-07-16T16:45:35.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-12T10:26:49.000Z (over 2 years ago)
• Last Synced: 2024-12-22T18:47:15.958Z (21 days ago)
• Language: JavaScript
• Size: 469 KB
• Stars: 2
• Watchers: 11
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-volto - volto-block-banner - Volto block for a customizable visual banner (Addons)

README

        
# volto-block-banner

A [volto](https://plone.org/what-is-plone/volto) [block](https://6.dev-docs.plone.org/volto/blocks/index.html) [add-on](https://6.dev-docs.plone.org/volto/addons/index.html) for a banner. It contains two sub-elements:

1. `Text`: The display text of the banner.

1. `CTA-Button`: Call To Action (CTA) button.

## Customizable properties

  Click to expand!

1. `text` (_string_): Main text or the heading of the banner.

1. `showActionButton` (_boolean_): Toggle the `CTA-Button`.

1. `actionButtonText` (_string_): `CTA-Button` label.

1. `actionButtonUrl` (_string_): `CTA-Button` _URL_ which is navigated onClick.

1. `backgroundColor` (_string_): Specifies the `backgroundColor` css property for the banner.

1. `textColor` (_string_): Specifies the `color` css property for `Text`.

1. `showCircle` (_boolean_): Toggle the orange circle background design.

1. `marginBottom` (_string_): Specifies the `margin-bottom` css property of the banner.

## Example

### Configuration

```txt

text: 'This is a Banner!! Put your message here!'

showActionButton: true

actionButtonText: 'Take Action'

actionButtonUrl: '/'

backgroundColor: '#2b4eff'

textColor: '#ffffff'

showCircle: true

marginBottom: '15px'

```

### Output

![image](/assets/github/preview.png)