SethTrowbridge/atomic-css
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

text utility classes

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-09 14:16:25 -04:00
parent 89064da9e8
commit d12976594a
1 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -59,18 +59,46 @@
} }
</style> </style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
.text--size-micro{ font-size: 12px; line-height:24px; }
.text--size-small{ font-size: 14px; line-height:24px; }
.text--size-copy{ font-size:16px; line-height:24px; }
.text--size-h2{ font-size:24px; line-height:28px; }
.text--size-h1{ font-size:32px; line-height:48px; }
.text--green-darken-01{ color: #4B6451; }
.text--weight-light{ font-family:"Nunito Sans"; font-weight:100; }
.text--weight-normal{ font-family:"Nunito Sans"; font-weight:300; }
.text--weight-bold{ font-family:"Nunito Sans"; font-weight:600; }
.text--weight-black{ font-family:"Nunito Sans"; font-weight:900; }
.text--uppercase{ text-transform: uppercase; }
</style>
</head> </head>
<body> <body>
<form> <form>
<div class="text--size-h2 text--weight-black">Review Your Order</div>
<div class="text--size-copy text--weight-black text--uppercase">Payment Method</div>
<div class="block">
<div class="text--size-copy text--weight-bold">Credit Card</div>
<a class="text--green-darken-01" href="/">Change</a>
</div>
<div class="block"> <div class="block">
<input id="check-1" type="radio" name="slot-1" value="option-1"/> <input id="check-1" type="radio" name="slot-1" value="option-1"/>
<label for="check-1"> <label for="check-1">
<strong>Credit Card</strong><br> <span class="text--size-copy text--weight-bold">Credit Card</strong><br>
<span>Credit Card</span><br> <span class="text--size-copy text--weight-normal">Credit Card</span><br>
<span>Credit Card</span><br> <span class="text--size-copy text--weight-normal">Credit Card</span><br>
<span>Credit Card</span><br> <span class="text--size-copy text--weight-normal">Credit Card</span><br>
<span>Credit Card</span> <span class="text--size-copy text--weight-normal">Credit Card</span>
</label> </label>
<a href="/">Change</a> <a href="/">Change</a>
</div> </div>