Text
The Text component is used to set paragraphs and headings throughout content. Type sizes have been adjusted for GUD5, and some extra styles have been added.
_10import { Text } from '@ef-global/backpack/Text'
Variants
There are currently 22 type variants, from 'display1', the largest, to 'smallprint', the smallest. Each Text component accepts an as prop, which allows you to set a semantic tag independently of the variant. The default is 'p'
Display 1
S64px / 72pxL 72px / 80px
Education in a backpack
_10<Text as='h1' variant="display1">Education in a backpack</Text>
Display 2
S56px / 64pxL 64px / 72px
Education in a backpack
_10<Text as='h1' variant="display2">Education in a backpack</Text>
Header 1
S48px / 56pxL 56px / 64px
Education in a backpack
_10<Text as='h1' variant="header1">Education in a backpack</Text>
Header 2
S40px / 48pxL 48px / 56px
Education in a backpack
_10<Text as='h2' variant="header2">Education in a backpack</Text>
Header 3
S32px / 40pxL 40px / 48px
Education in a backpack
_10<Text as='h3' variant="header3">Education in a backpack</Text>
Header 4
S24 / 32pxL 32px / 40px
Education in a backpack
_10<Text as='h4' variant="header4">Education in a backpack</Text>
Header 5
S20px / 24pxL 24px / 32px
Education in a backpack
_10<Text as='h5' variant="header5">Education in a backpack</Text>
Header 6
S16px / 24pxL 16px / 24px
Education in a backpack
_10<Text as='h6' variant="header6">Education in a backpack</Text>
Subheader 1
S24px / 32pxL 32px / 40px
Education in a backpack
_10<Text as='h6' variant="subheader1">Education in a backpack</Text>
Subheader 2
S20px / 28pxL 24px / 32px
Education in a backpack
_10<Text as='h6' variant="subheader2">Education in a backpack</Text>
Title 1
S24px / 32pxL 24px / 32px
Education in a backpack
_10<Text as='h6' variant="title1">Education in a backpack</Text>
Title 2
S20px / 28pxL 20px / 28px
Education in a backpack
_10<Text as='h6' variant="title2">Education in a backpack</Text>
Title 3
S18px / 28pxL 18px / 28px
Education in a backpack
_10<Text as='h6' variant="title3">Education in a backpack</Text>
Body (default)
S18px / 24px
Our mission is opening the world through education. We believe that means creating the opportunity to experience the life-changing impact of educational travel for all students regardless of gender identity, race, physical ability, sexual orientation and socioeconomic status.
_10<Text>Our mission is opening the world through education...</Text>
Body Book
S18px / 24px
Our mission is opening the world through education. We believe that means creating the opportunity to experience the life-changing impact of educational travel for all students regardless of gender identity, race, physical ability, sexual orientation and socioeconomic status.
_10<Text variant="bodyBook">Our mission is opening the world through education...</Text>
Body Small
S16px / 24px
Our mission is opening the world through education. We believe that means creating the opportunity to experience the life-changing impact of educational travel for all students regardless of gender identity, race, physical ability, sexual orientation and socioeconomic status.
_10<Text variant="bodySmall">Our mission is opening the world through education...</Text>
UI Label 1
S16px / 24px
Education.
_10<Text variant="uiLabel1">Education.</Text>
UI Label 1 Bold
S14px / 16px
Education.
_10<Text variant="uiLabel1Bold">Education.</Text>
UI Label 2
S16px / 24px
Education.
_10<Text variant="uiLabel2">Education.</Text>
UI Label 2 Bold
S16px / 24px
Education.
_10<Text variant="uiLabel2Bold">Education.</Text>
Smallprint
S12px / 16px
Our mission is opening the world through education. We believe that means creating the opportunity to experience the life-changing impact of educational travel for all students regardless of gender identity, race, physical ability, sexual orientation and socioeconomic status.
_10<Text variant="smallprint">Our mission is opening the world through education...</Text>
Smallprint Bold
S12px / 16px
Our mission is opening the world through education. We believe that means creating the opportunity to experience the life-changing impact of educational travel for all students regardless of gender identity, race, physical ability, sexual orientation and socioeconomic status.
_10<Text variant="smallprintBold">Our mission is opening the world through education...</Text>
Text alignment
The align prop is used to set text-alignment.
Left (default)
Our mission is opening the world through education.
_10<Text align="left">Our mission is opening the world through education.</Text>
Center
Our mission is opening the world through education.
_10<Text align="center">Our mission is opening the world through education.</Text>
Right
Our mission is opening the world through education.
_10<Text align="right">Our mission is opening the world through education.</Text>