Skip to content

Commit 088152f

Browse files
author
mrmrs
committed
Update single cta component
1 parent 090f7a8 commit 088152f

File tree

2 files changed

+66
-47
lines changed

2 files changed

+66
-47
lines changed

‎components/banners/single-cta/index.html‎

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,25 @@
2222
</style>
2323

2424
</head>
25-
<body class="w-100 sans-serif bg-white pt5">
25+
<body class="w-100 sans-serif bg-white">
2626
<main>
27+
<section class="ph3 ph5-ns pv5">
2728
<article class="mw8 center br2 ba b--light-blue bg-lightest-blue">
28-
<div class="dt-ns dt--fixed-ns w-100">
29-
<div class="pa3 pa4-ns dtc-ns v-mid">
30-
<div>
31-
<h2 class="fw4 blue mt0 mb3">This is a promo title </h2>
32-
<p class="black-70 measure lh-copy mv0">
33-
This is suporting copy for the wonderful promo catchphrase that is going to be used.
34-
</p>
29+
<div class="dt-ns dt--fixed-ns w-100">
30+
<div class="pa3 pa4-ns dtc-ns v-mid">
31+
<div>
32+
<h2 class="fw4 blue mt0 mb3">This is a promo title </h2>
33+
<p class="black-70 measure lh-copy mv0">
34+
This is suporting copy for the wonderful promo catchphrase that is going to be used.
35+
</p>
36+
</div>
37+
</div>
38+
<div class="pa3 pa4-ns dtc-ns v-mid">
39+
<a href="#" class="no-underline f6 tc db w-100 pv3 bg-animate bg-blue hover-bg-dark-blue white br2">Sign up for free</a>
3540
</div>
3641
</div>
37-
<div class="pa3 pa4-ns dtc-ns v-mid">
38-
<a href="#" class="no-underline f6 tc db w-100 pv3 bg-animate bg-blue hover-bg-dark-blue white br2">Sign up for free</a>
39-
</div>
40-
</div>
41-
</article>
42+
</article>
43+
</section>
4244

4345
<section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-white">
4446
<h1 class="f4 f3-ns mt4">Single Cta</h1>
@@ -47,21 +49,23 @@ <h1 class="f4 f3-ns mt4">Single Cta</h1>
4749
<h2 class="f5">HTML</h2>
4850
<p class="f5 black-70"></p>
4951
<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
50-
&lt;article class=&quot;mw8 center br2 ba b--light-blue bg-lightest-blue&quot;&gt;
51-
&lt;div class=&quot;dt-ns dt--fixed-ns w-100&quot;&gt;
52-
&lt;div class=&quot;pa3 pa4-ns dtc-ns v-mid&quot;&gt;
53-
&lt;div&gt;
54-
&lt;h2 class=&quot;fw4 blue mt0 mb3&quot;&gt;This is a promo title &lt;/h2&gt;
55-
&lt;p class=&quot;black-70 measure lh-copy mv0&quot;&gt;
56-
This is suporting copy for the wonderful promo catchphrase that is going to be used.
57-
&lt;/p&gt;
52+
&lt;section class=&quot;ph3 ph5-ns pv5&quot;&gt;
53+
&lt;article class=&quot;mw8 center br2 ba b--light-blue bg-lightest-blue&quot;&gt;
54+
&lt;div class=&quot;dt-ns dt--fixed-ns w-100&quot;&gt;
55+
&lt;div class=&quot;pa3 pa4-ns dtc-ns v-mid&quot;&gt;
56+
&lt;div&gt;
57+
&lt;h2 class=&quot;fw4 blue mt0 mb3&quot;&gt;This is a promo title &lt;/h2&gt;
58+
&lt;p class=&quot;black-70 measure lh-copy mv0&quot;&gt;
59+
This is suporting copy for the wonderful promo catchphrase that is going to be used.
60+
&lt;/p&gt;
61+
&lt;/div&gt;
62+
&lt;/div&gt;
63+
&lt;div class=&quot;pa3 pa4-ns dtc-ns v-mid&quot;&gt;
64+
&lt;a href=&quot;#&quot; class=&quot;no-underline f6 tc db w-100 pv3 bg-animate bg-blue hover-bg-dark-blue white br2&quot;&gt;Sign up for free&lt;/a&gt;
5865
&lt;/div&gt;
5966
&lt;/div&gt;
60-
&lt;div class=&quot;pa3 pa4-ns dtc-ns v-mid&quot;&gt;
61-
&lt;a href=&quot;#&quot; class=&quot;no-underline f6 tc db w-100 pv3 bg-animate bg-blue hover-bg-dark-blue white br2&quot;&gt;Sign up for free&lt;/a&gt;
62-
&lt;/div&gt;
63-
&lt;/div&gt;
64-
&lt;/article&gt;
67+
&lt;/article&gt;
68+
&lt;/section&gt;
6569

6670
</pre>
6771
</div>
@@ -137,6 +141,16 @@ <h2 class="f5">css</h2>
137141
padding-bottom: 1rem;
138142
}
139143

144+
.pv5 {
145+
padding-top: 4rem;
146+
padding-bottom: 4rem;
147+
}
148+
149+
.ph3 {
150+
padding-left: 1rem;
151+
padding-right: 1rem;
152+
}
153+
140154
.mb3 {
141155
margin-bottom: 1rem;
142156
}
@@ -196,6 +210,11 @@ <h2 class="f5">css</h2>
196210
.pa4-ns {
197211
padding: 2rem;
198212
}
213+
214+
.ph5-ns {
215+
padding-left: 4rem;
216+
padding-right: 4rem;
217+
}
199218
}
200219

201220
</pre>
@@ -206,16 +225,16 @@ <h2 class="f5">css</h2>
206225
<h2 class="f5 mb3 mt4">Css stats for this component</h2>
207226
<dl class="dib mr4 mt0">
208227
<dt class="db f6">Gzipped Size</dt>
209-
<dd class="ml0 b f3 f2-ns">549<small class="f6">B</small>
228+
<dd class="ml0 b f3 f2-ns">583<small class="f6">B</small>
210229
</dd>
211230
</dl>
212231
<dl class="dib mr4 mt0">
213232
<dt class="db f6">Selectors</dt>
214-
<dd class="ml0 b f3 f2-ns">33</dd>
233+
<dd class="ml0 b f3 f2-ns">36</dd>
215234
</dl>
216235
<dl class="dib mt0">
217236
<dt class="db f6">Declarations</dt>
218-
<dd class="ml0 b f3 f2-ns">36</dd>
237+
<dd class="ml0 b f3 f2-ns">42</dd>
219238
</dl>
220239
</div>
221240
<div class="fl w-100">

‎components/index.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107

108108
<div class="ph3 ph5-ns" id="article-lists">
109109
<div class="mw9 center">
110-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">article-lists</h1>
110+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">article-lists</h1>
111111
</div>
112112
</div>
113113
<div class="ph3 ph5-ns mb5">
@@ -126,7 +126,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">article-lists</h1>
126126

127127
<div class="ph3 ph5-ns" id="articles">
128128
<div class="mw9 center">
129-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">articles</h1>
129+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">articles</h1>
130130
</div>
131131
</div>
132132
<div class="ph3 ph5-ns mb5">
@@ -173,7 +173,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">articles</h1>
173173

174174
<div class="ph3 ph5-ns" id="avatars">
175175
<div class="mw9 center">
176-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">avatars</h1>
176+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">avatars</h1>
177177
</div>
178178
</div>
179179
<div class="ph3 ph5-ns mb5">
@@ -212,7 +212,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">avatars</h1>
212212

213213
<div class="ph3 ph5-ns" id="banners">
214214
<div class="mw9 center">
215-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">banners</h1>
215+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">banners</h1>
216216
</div>
217217
</div>
218218
<div class="ph3 ph5-ns mb5">
@@ -231,7 +231,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">banners</h1>
231231

232232
<div class="ph3 ph5-ns" id="buttons">
233233
<div class="mw9 center">
234-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">buttons</h1>
234+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">buttons</h1>
235235
</div>
236236
</div>
237237
<div class="ph3 ph5-ns mb5">
@@ -270,7 +270,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">buttons</h1>
270270

271271
<div class="ph3 ph5-ns" id="cards">
272272
<div class="mw9 center">
273-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">cards</h1>
273+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">cards</h1>
274274
</div>
275275
</div>
276276
<div class="ph3 ph5-ns mb5">
@@ -313,7 +313,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">cards</h1>
313313

314314
<div class="ph3 ph5-ns" id="collections">
315315
<div class="mw9 center">
316-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">collections</h1>
316+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">collections</h1>
317317
</div>
318318
</div>
319319
<div class="ph3 ph5-ns mb5">
@@ -344,7 +344,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">collections</h1>
344344

345345
<div class="ph3 ph5-ns" id="definition-lists">
346346
<div class="mw9 center">
347-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">definition-lists</h1>
347+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">definition-lists</h1>
348348
</div>
349349
</div>
350350
<div class="ph3 ph5-ns mb5">
@@ -359,7 +359,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">definition-lists</h1>
359359

360360
<div class="ph3 ph5-ns" id="footers">
361361
<div class="mw9 center">
362-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">footers</h1>
362+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">footers</h1>
363363
</div>
364364
</div>
365365
<div class="ph3 ph5-ns mb5">
@@ -402,7 +402,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">footers</h1>
402402

403403
<div class="ph3 ph5-ns" id="forms">
404404
<div class="mw9 center">
405-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">forms</h1>
405+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">forms</h1>
406406
</div>
407407
</div>
408408
<div class="ph3 ph5-ns mb5">
@@ -425,7 +425,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">forms</h1>
425425

426426
<div class="ph3 ph5-ns" id="headers">
427427
<div class="mw9 center">
428-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">headers</h1>
428+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">headers</h1>
429429
</div>
430430
</div>
431431
<div class="ph3 ph5-ns mb5">
@@ -448,7 +448,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">headers</h1>
448448

449449
<div class="ph3 ph5-ns" id="layout">
450450
<div class="mw9 center">
451-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">layout</h1>
451+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">layout</h1>
452452
</div>
453453
</div>
454454
<div class="ph3 ph5-ns mb5">
@@ -623,7 +623,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">layout</h1>
623623

624624
<div class="ph3 ph5-ns" id="links">
625625
<div class="mw9 center">
626-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">links</h1>
626+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">links</h1>
627627
</div>
628628
</div>
629629
<div class="ph3 ph5-ns mb5">
@@ -650,7 +650,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">links</h1>
650650

651651
<div class="ph3 ph5-ns" id="lists">
652652
<div class="mw9 center">
653-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">lists</h1>
653+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">lists</h1>
654654
</div>
655655
</div>
656656
<div class="ph3 ph5-ns mb5">
@@ -717,7 +717,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">lists</h1>
717717

718718
<div class="ph3 ph5-ns" id="nav">
719719
<div class="mw9 center">
720-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">nav</h1>
720+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">nav</h1>
721721
</div>
722722
</div>
723723
<div class="ph3 ph5-ns mb5">
@@ -756,7 +756,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">nav</h1>
756756

757757
<div class="ph3 ph5-ns" id="pages">
758758
<div class="mw9 center">
759-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">pages</h1>
759+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">pages</h1>
760760
</div>
761761
</div>
762762
<div class="ph3 ph5-ns mb5">
@@ -779,7 +779,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">pages</h1>
779779

780780
<div class="ph3 ph5-ns" id="quotes">
781781
<div class="mw9 center">
782-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">quotes</h1>
782+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">quotes</h1>
783783
</div>
784784
</div>
785785
<div class="ph3 ph5-ns mb5">
@@ -798,7 +798,7 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70">quotes</h1>
798798

799799
<div class="ph3 ph5-ns" id="text">
800800
<div class="mw9 center">
801-
<h1 class="f6 fw6 pb2 bb b--black-10 black-70">text</h1>
801+
<h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc">text</h1>
802802
</div>
803803
</div>
804804
<div class="ph3 ph5-ns mb5">

0 commit comments

Comments
 (0)