Northbeam
Product Solutions Docs Company
Book a demo

Now in open beta

Ship the impossible, twice as fast
h1.hero-title
451 × 97
Box Model
width:
451px
height:
97px
display:
block
box-sizing:
border-box
Appearance
color:
#FFFFFF
Text
font-family:
Geist
font-size:
44px
font-weight:
600
line-height:
1.1
letter-spacing:
-1.32px
text-align:
center
Accessibility
contrast:
Aa
19.4
AAA

Composable primitives for teams that move quicker than their roadmap. No setup, no ceremony, no rewrite.

Start building
a.hero__cta
121 × 36
Read the docs
a.hero__docs
128 × 36
16
Layout Grid
2
Find Element
    • Select Parent
    • Select Child
    • Inspector
    • X-Ray Mode
    • Layout Grid
    • Page Rulers
    • Breakpoints
    • Edit Text
    • Copy
    • Paste
    • Duplicate
    • Delete
    • Undo
    • Redo
    • Color Picker
    • Find Element
    • Capture Screenshot
    • Responsive Mode
    • Toggle Side Panel
    • Pause
    • Quit
    • Show Dock
    • Hide Dock
    • Inspect
    • Edit
    • Select Parent
    • Select Child
    • Inspector
    • X-Ray Mode
    • Layout Grid
    • Page Rulers
    • Breakpoints
    • Edit Text
    • Copy
    • Paste
    • Duplicate
    • Delete
    • Undo
    • Redo
    • Color Picker
    • Find Element
    • Capture Screenshot
    • Responsive Mode
    • Toggle Side Panel
    • Pause
    • Quit
    • Show Dock
    • Hide Dock
    • Inspect
    • Edit
a.hero__cta
121 × 36
Default
Document
  • section.hero
  • a.hero__cta
Box Model
Margin
-
-
-
-
Border
-
-
-
-
Padding
10
16
10
16
121 × 36
Code
Source
a.hero__cta {
width: 121px;
height: 36px;
margin: 0px;
padding: 10px 16px;
display: inline-flex;
align-items: center;
box-sizing: border-box;
border-radius: 8px;
background: #FFFFFF;
font-size: 14px;
font-family: Geist, system-ui, sans-serif;
font-weight: 500;
text-align: center;
line-height: 1.6;
color: #131313;
}
.hero__cta {
display: inline-flex;
align-items: center;
padding: 10px 16px;
border-radius: 8px;
background: var(--primary);
color: var(--background);
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease;
}
 
.hero__cta:hover {
background: var(--accent);
}
styles.css 
w-[121px] h-[36px] m-[0px] px-[16px] py-[10px] inline-flex items-center box-border rounded-[8px] bg-[rgb(255,255,255)] text-[14px] font-[family-name:Geist,_system-ui,_sans-serif] font-[weight:500] text-center leading-[1.6] text-[rgb(19,19,19)]
a.hero__cta
No edits
Default

Click an Element to Select

Toggle Extension⌥⇧SUndo⌘ZRedo⇧⌘ZCopy⌘CPaste⌘V

No changes found

Screen Ruler Chrome Extension - Measure, Inspect & Edit the Web
www.screen-ruler.com
Social Preview
Facebook
www.screen-ruler.com
Screen Ruler Chrome Extension - Measure, Inspect & Edit the Web
Free Chrome extension to measure pixels, inspect elements and fonts, pick colors, extract assets, and edit CSS on any page. Trusted by 60,000+ developers and designers.
Page Weight
1.08 MB
Document
Scripts
Stylesheets
Images
5 Technologies
Google FontsGoogle FontsTailwind CSSTailwind CSSReactReactNext.jsNext.jsVercelVercel
h1.hero-title
No edits
Default

Click an Element to Select

Toggle Extension⌥⇧SUndo⌘ZRedo⇧⌘ZCopy⌘CPaste⌘V

No changes found

a.hero__cta
No edits
Default

Click an Element to Select

Toggle Extension⌥⇧SUndo⌘ZRedo⇧⌘ZCopy⌘CPaste⌘V
align-items: center;
background: var(--primary);
border-radius: 8px;
box-sizing: border-box;
color: var(--background);
display: inline-flex;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
height: 36px;
padding: 10px 16px;
Effective Styles
Rules
element.style {
}
.hero__cta {styles.css:214
background: var(--primary);
border-radius: 8px;
color: var(--background);
font-size: 14px;
font-weight: 500;
height: 36px;
padding: 10px 16px;
}
.button {styles.css:88
background: #2E62FF;
border-radius: 999px;
cursor: pointer;
}
a {vendor.css:1read-only
color: inherit;
text-decoration: none;
}
@media (max-width: 768px)
.hero__cta {styles.css:412
font-size: 13px;
padding: 8px 12px;
}
Inherited from body
body {styles.css:12
font-family: var(--font-sans);
color: #1F2933;
line-height: 1.5;
margin: 0px;
}
Classes
hero__cta button

No changes found