Style guide
Astra is a versatile modern Webflow template. Purposely built for your to create exactly what you need.
Typography
Heading 1
Technor | 500 Med | 72 px Font size | 1.2 em line height | Letter spacing Normal | Token H1
Heading 2
Technor | 500 Med | 60 px Font size | 1.2 em line height | Letter spacing Normal | Token H2
Heading 3
Technor | 500 Med | 48 px Font size | 1.2 em line height | Letter spacing Normal | Token H3
Heading 4
Technor | 500 Med | 36 px Font size | 1.2 em line height | Letter spacing Normal | Token H4
Heading 5
Technor | 500 Med | 30 px Font size | 1.2 em line height | Letter spacing Normal | Token H5
Heading 6
Technor | 500 Med | 24 px Font size | 1.2 em line height | Letter spacing Normal | Token H5
Sub header
Supreme | 800 Ex Bold | 20 px Font size | 1.3 em line height | Letter spacing Normal | Token Sub header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Supreme | 400 Normal | 16 px Font size | 1.3 em line height | Letter spacing Normal | Token Paragraph
Content
Simple content left aligned with paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Sub header
Simple content left aligned with subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Content outside of card wrapper element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
sub header
Content outside of card wrapper element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Simple content center aligned with colored bg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
20+
Horizontal center inside grid
20+
Elit eu odio interdum
Rich text
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.