Skip to content

Instantly share code, notes, and snippets.

<div class="Card">
<div class="styleguide-example">
<span class="Status Status-green">Paid</span>
<span class="Status Status-yellow">Pending</span>
<span class="Status Status-red">Late Payment</span>
</div>
```html
<span class="Status Status-green">Complete</span>
<span class="Status Status-yellow">Pending</span>
<div class="Card">
<div class="styleguide-example">
<span class="Status green">Paid</span>
<span class="Status yellow">Pending</span>
<span class="Status red">Late Payment</span>
</div>
```html
<span class="Status green">Complete</span>
<span class="Status yellow">Pending</span>
<span class="Status red">Late Payment</span>
def show
@website = Website.find(params[:id])
@page = Page.new
unless @website.user_id == current_user.id
flash[:error] = "Oi, stop snooping around!"
redirect_to current_user
end
unless params[:id] == @website.to_param
const Text = styled.p`
// Styles unique to this component
color: ${theme.GRAY_900};
// Props unique to this component
${p => p.size1 && css`
font-size: ${theme.FONTSIZE_200};
import React from "react";
import { cssReset, CssResetTagName } from "../utils/cssReset";
import { withInteropStyledSystem } from "@interop/styled-system";
const defaultRenderElement = "button";
type ButtonDOMProps = React.ComponentPropsWithRef<typeof defaultRenderElement>;
type ButtonOwnProps = {};
type ButtonProps = ButtonDOMProps &
ButtonOwnProps & { as?: React.ElementType<any> };
import { sliderprimitive } from "@modulz/primitives";
const Slider = sliderprimitive();
const { Thumb, InnerTrack, Track } = Slider;
Slider.style({
[Track]: {
borderRadius: "3px",
backgroundColor: "gainsboro",
},
const text = css({
color: '$gray12',
variants: {
size: {
// corrective letter-spacing and text-indent styles
// should go here too, because they're determined by font-size.
// You could also put line-height here too, if your devs prefer
// a default line-height that works in some cases. But understand
// that line-height is also a function of line-length, so the