https://github.com/r3-dev/brand
r3-dev icons, badges and colors usage guidelines
https://github.com/r3-dev/brand
brand web-components
Last synced: 8 months ago
JSON representation
r3-dev icons, badges and colors usage guidelines
- Host: GitHub
- URL: https://github.com/r3-dev/brand
- Owner: r3-dev
- Created: 2023-06-29T12:19:01.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-05T09:04:12.000Z (almost 3 years ago)
- Last Synced: 2025-02-27T23:16:33.509Z (over 1 year ago)
- Topics: brand, web-components
- Language: HTML
- Homepage: https://r3-dev.github.io/brand/
- Size: 121 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# R3 dev brand
## Installation
```
npm install @r3-dev/badge
```
```
yarn add @r3-dev/badge
```
```
pnpm add @r3-dev/badge
```
## Usage in React/Next.js
[](https://codesandbox.io/s/r3-dev-badge-z6f766?fontsize=14&hidenavigation=1&theme=dark)
```tsx
// components/badge.tsx
import '@r3-dev/badge'
declare global {
namespace JSX {
interface IntrinsicElements {
'r3-badge': React.DetailedHTMLProps<
React.AnchorHTMLAttributes,
HTMLAnchorElement
>
}
}
}
export default function Badge() {
return (
)
}
// _app.tsx
import dynamic from 'next/dynamic'
import type { AppProps } from 'next/app'
const Badge = dynamic(() => import('../components/badge'), {
ssr: false
})
export default function App({
Component,
pageProps: { ...pageProps }
}: AppProps) {
return (
<>
>
)
}
```
# CDN
```html
```
## Overriding styles
```css
r3-badge {
/* default colors */
/* --bg-badge: #000; */
--text-badge: #fff;
--bg-logo: #00a621;
--text-logo: #fff;
/* override */
--bg-badge: darkblue;
/* light shadow */
filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.5));
/* dark shadow */
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
}
/* dark mode */
@media (prefers-color-scheme: dark) {
r3-badge {
--bg-badge: #fff;
--text-badge: #000;
}
}
/* light mode */
@media (prefers-color-scheme: light) {
r3-badge {
--bg-badge: #000;
--text-badge: #fff;
}
}
```
## Markdown
```markdown
```