|
1 | | -# WIP 🐣: RHElements Cta Element |
| 1 | +# WIP 🐣: RHElements CTA Element |
| 2 | + |
| 3 | +`rh-cta` is a call-to-action (CTA) element, that stands out from regular hypertext links, and is used for linking users to webpages. |
| 4 | + |
| 5 | +_Note: `rh-cta` is not a button, though it may look like one visually._ |
2 | 6 |
|
3 | 7 | ## Usage |
4 | 8 | ```html |
5 | 9 | <rh-cta> |
| 10 | + <a href="https://github.com/">GitHub</a> |
| 11 | +</rh-cta> |
| 12 | + |
| 13 | +<rh-cta priority="primary"> |
6 | 14 | <a href="https://rhelements.github.io/">Learn more about RHElements</a> |
7 | 15 | </rh-cta> |
| 16 | + |
| 17 | +<rh-cta priority="secondary"> |
| 18 | + <a href="https://redhat.com/">Red Hat</a> |
| 19 | +</rh-cta> |
8 | 20 | ``` |
9 | 21 |
|
10 | 22 | ## Slots |
11 | 23 |
|
12 | 24 | ### Default slot |
13 | 25 |
|
14 | | -We expect an anchor tag, `<a>`, to be the first child inside rh-cta element. |
| 26 | +We expect an anchor tag, `<a>` with an `href`, to be the first child inside `rh-cta` element. |
| 27 | + |
| 28 | +## Styling |
| 29 | + |
| 30 | +| Theme Var Hook | Description | Default | |
| 31 | +| -------------- | ----------- | ------- | |
| 32 | +| --rh-theme--color--ui-link | Link color for default CTA | $rh-color--ui-link | |
| 33 | +| --rh-theme--color--ui-link--hover | Hover color for default CTA | $rh-color--ui-link--hover | |
| 34 | +| --rh-theme--color--ui-link--focus | Focus color for default CTA | $rh-color--ui-link--focus | |
| 35 | +| --rh-theme--color--ui-accent | Color for Primary CTA | $rh-color--ui-accent | |
| 36 | +| --rh-theme--color--ui-accent--hover | Hover color for Primary CTA | $rh-color--ui-accent--hover | |
| 37 | +| --rh-theme--color--ui-accent--text | Text color for Primary CTA | $rh-color--ui-accent--text | |
| 38 | +| --rh-theme--color--ui-accent--text--hover | Hover text color for Primary CTA | $rh-color--ui-accent--text--hover | |
| 39 | +| --rh-theme--color--ui-base | Border & text color for Secondary CTA | $rh-color--ui-base | |
| 40 | +| --rh-theme--color--ui-base--hover | Hover color for Secondary CTA | $rh-color--ui-base--hover | |
| 41 | +| --rh-theme--color--ui-base--text | Background color for Secondary CTA | $rh-color--ui-base--text | |
| 42 | +| --rh-theme--color--ui-base--text--hover | Hover text color for Secondary CTA | $rh-color--ui-base--text--hover | |
| 43 | +| --rh-theme--color--text--on-dark | Link color for default CTA with `on="dark"` | $rh-color--text--on-dark | |
| 44 | +| --rh-theme--color--ui-link--on-dark--hover | Hover color for default CTA with `on="dark"` | $rh-color--ui-link--on-dark--hover | |
| 45 | + |
| 46 | +### Testing Theme Var Hooks |
| 47 | + |
| 48 | +If you'd like to checkout how theming is possible using our CSS Var hooks, try adding the following to the `<head>` of `./demo/index.html` before running `npm run test`. Feel free to customize the colors too! |
| 49 | + |
| 50 | +```html |
| 51 | +<style> |
| 52 | +:root { |
| 53 | + --rh-theme--color--ui-accent: green; |
| 54 | + --rh-theme--color--ui-accent--hover: darkgreen; |
| 55 | + --rh-theme--color--ui-accent--text: white; |
| 56 | + --rh-theme--color--ui-accent--text--hover: white; |
| 57 | +} |
| 58 | +</style> |
| 59 | +``` |
15 | 60 |
|
16 | 61 | ## Test |
17 | 62 |
|
|
0 commit comments