Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-16 05:28:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 141
fleet/frontend/components/Card
History
Gabriel Hernandez 0f02fa012e
create a reusable UI card component (#12455) 
I notices we were reusing styles alot for the card like container UI so
I created a reusable `Card` component

The component is used like this:

```tsx

// default card is white background
<Card>
  <p>whatever JSX you want</p>
</Card>

<Card color="gray">
  <p>whatever JSX you want</p>
</Card>

<Card color="yellow">
  <p>whatever JSX you want</p>
</Card>

<Card color="purple">
  <p>whatever JSX you want</p>
</Card>
```

**white**


![image](https://github.com/fleetdm/fleet/assets/1153709/53ee43a7-982b-480b-8bcf-0c585e0e01b5)

**gray**


![image](https://github.com/fleetdm/fleet/assets/1153709/5afa85df-d63f-4c5a-8f31-d7d6d9174862)

**yellow**


![image](https://github.com/fleetdm/fleet/assets/1153709/334291d6-c5af-4caa-adcb-b28696a054d7)

**purple**


![image](https://github.com/fleetdm/fleet/assets/1153709/0cc87478-f507-4c7f-9807-328e2384a8b1)

- [x] Manual QA for all new/changed functionality
2023-06-26 16:33:46 +01:00
..
_styles.scss create a reusable UI card component (#12455) 2023-06-26 16:33:46 +01:00
Card.stories.tsx create a reusable UI card component (#12455) 2023-06-26 16:33:46 +01:00
Card.tsx create a reusable UI card component (#12455) 2023-06-26 16:33:46 +01:00
index.ts create a reusable UI card component (#12455) 2023-06-26 16:33:46 +01:00