Skip to content

Commit f75c603

Browse files
author
mrmrs
committed
Update the components page
1 parent 2aaae8a commit f75c603

File tree

2 files changed

+206
-1
lines changed

2 files changed

+206
-1
lines changed

‎src/components/collections/square-title-subtitle.html

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<section class="cf w-100 pa2-ns">
5+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
6+
<div class="aspect-ratio aspect-ratio--1x1">
7+
<img style="background-image:url(http://mrmrs.io/images/0006.jpg);"
8+
class="db bg-center cover aspect-ratio--object" />
9+
</div>
10+
<a href="#0" class="ph2 ph0-ns pb3 link db">
11+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
12+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
13+
</a>
14+
</article>
15+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
16+
<div class="aspect-ratio aspect-ratio--1x1">
17+
<img style="background-image:url(http://mrmrs.io/images/0002.jpg);"
18+
class="db bg-center cover aspect-ratio--object" />
19+
</div>
20+
<a href="#0" class="ph2 ph0-ns pb3 link db">
21+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
22+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
23+
</a>
24+
</article>
25+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
26+
<div class="aspect-ratio aspect-ratio--1x1">
27+
<img style="background-image:url(http://mrmrs.io/images/0003.jpg);"
28+
class="db bg-center cover aspect-ratio--object" />
29+
</div>
30+
<a href="#0" class="ph2 ph0-ns pb3 link db">
31+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
32+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
33+
</a>
34+
</article>
35+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
36+
<div class="aspect-ratio aspect-ratio--1x1">
37+
<img style="background-image:url(http://mrmrs.io/images/0004.jpg);"
38+
class="db bg-center cover aspect-ratio--object" />
39+
</div>
40+
<a href="#0" class="ph2 ph0-ns pb3 link db">
41+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
42+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
43+
</a>
44+
</article>
45+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
46+
<div class="aspect-ratio aspect-ratio--1x1">
47+
<img style="background-image:url(http://mrmrs.io/images/0007.jpg);"
48+
class="db bg-center cover aspect-ratio--object" />
49+
</div>
50+
<a href="#0" class="ph2 ph0-ns pb3 link db">
51+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
52+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
53+
</a>
54+
</article>
55+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
56+
<div class="aspect-ratio aspect-ratio--1x1">
57+
<img style="background-image:url(http://mrmrs.io/images/0008.jpg);"
58+
class="db bg-center cover aspect-ratio--object" />
59+
</div>
60+
<a href="#0" class="ph2 ph0-ns pb3 link db">
61+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
62+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
63+
</a>
64+
</article>
65+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
66+
<div class="aspect-ratio aspect-ratio--1x1">
67+
<img style="background-image:url(http://mrmrs.io/images/0009.jpg);"
68+
class="db bg-center cover aspect-ratio--object" />
69+
</div>
70+
<a href="#0" class="ph2 ph0-ns pb3 link db">
71+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
72+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
73+
</a>
74+
</article>
75+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
76+
<div class="aspect-ratio aspect-ratio--1x1">
77+
<img style="background-image:url(http://mrmrs.io/images/0010.jpg);"
78+
class="db bg-center cover aspect-ratio--object" />
79+
</div>
80+
<a href="#0" class="ph2 ph0-ns pb3 link db">
81+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
82+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
83+
</a>
84+
</article>
85+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
86+
<div class="aspect-ratio aspect-ratio--1x1">
87+
<img style="background-image:url(http://mrmrs.io/images/0011.jpg);"
88+
class="db bg-center cover aspect-ratio--object" />
89+
</div>
90+
<a href="#0" class="ph2 ph0-ns pb3 link db">
91+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
92+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
93+
</a>
94+
</article>
95+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
96+
<div class="aspect-ratio aspect-ratio--1x1">
97+
<img style="background-image:url(http://mrmrs.io/images/0012.jpg);"
98+
class="db bg-center cover aspect-ratio--object" />
99+
</div>
100+
<a href="#0" class="ph2 ph0-ns pb3 link db">
101+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
102+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
103+
</a>
104+
</article>
105+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
106+
<div class="aspect-ratio aspect-ratio--1x1">
107+
<img style="background-image:url(http://mrmrs.io/images/0013.jpg);"
108+
class="db bg-center cover aspect-ratio--object" />
109+
</div>
110+
<a href="#0" class="ph2 ph0-ns pb3 link db">
111+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
112+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
113+
</a>
114+
</article>
115+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
116+
<div class="aspect-ratio aspect-ratio--1x1">
117+
<img style="background-image:url(http://mrmrs.io/images/0014.jpg);"
118+
class="db bg-center cover aspect-ratio--object" />
119+
</div>
120+
<a href="#0" class="ph2 ph0-ns pb3 link db">
121+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
122+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
123+
</a>
124+
</article>
125+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
126+
<div class="aspect-ratio aspect-ratio--1x1">
127+
<img style="background-image:url(http://mrmrs.io/images/0015.jpg);"
128+
class="db bg-center cover aspect-ratio--object" />
129+
</div>
130+
<a href="#0" class="ph2 ph0-ns pb3 link db">
131+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
132+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
133+
</a>
134+
</article>
135+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
136+
<div class="aspect-ratio aspect-ratio--1x1">
137+
<img style="background-image:url(http://mrmrs.io/images/0016.jpg);"
138+
class="db bg-center cover aspect-ratio--object" />
139+
</div>
140+
<a href="#0" class="ph2 ph0-ns pb3 link db">
141+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
142+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
143+
</a>
144+
</article>
145+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
146+
<div class="aspect-ratio aspect-ratio--1x1">
147+
<img style="background-image:url(http://mrmrs.io/images/0017.jpg);"
148+
class="db bg-center cover aspect-ratio--object" />
149+
</div>
150+
<a href="#0" class="ph2 ph0-ns pb3 link db">
151+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
152+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
153+
</a>
154+
</article>
155+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
156+
<div class="aspect-ratio aspect-ratio--1x1">
157+
<img style="background-image:url(http://mrmrs.io/images/0018.jpg);"
158+
class="db bg-center cover aspect-ratio--object" />
159+
</div>
160+
<a href="#0" class="ph2 ph0-ns pb3 link db">
161+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
162+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
163+
</a>
164+
</article>
165+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
166+
<div class="aspect-ratio aspect-ratio--1x1">
167+
<img style="background-image:url(http://mrmrs.io/images/0019.jpg);"
168+
class="db bg-center cover aspect-ratio--object" />
169+
</div>
170+
<a href="#0" class="ph2 ph0-ns pb3 link db">
171+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
172+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
173+
</a>
174+
</article>
175+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
176+
<div class="aspect-ratio aspect-ratio--1x1">
177+
<img style="background-image:url(http://mrmrs.io/images/0020.jpg);"
178+
class="db bg-center cover aspect-ratio--object" />
179+
</div>
180+
<a href="#0" class="ph2 ph0-ns pb3 link db">
181+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
182+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
183+
</a>
184+
</article>
185+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
186+
<div class="aspect-ratio aspect-ratio--1x1">
187+
<img style="background-image:url(http://mrmrs.io/images/0021.jpg);"
188+
class="db bg-center cover aspect-ratio--object" />
189+
</div>
190+
<a href="#0" class="ph2 ph0-ns pb3 link db">
191+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
192+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
193+
</a>
194+
</article>
195+
<article class="fl w-100 w-50-m w-25-ns pa2-ns">
196+
<div class="aspect-ratio aspect-ratio--1x1">
197+
<img style="background-image:url(http://mrmrs.io/images/0022.jpg);"
198+
class="db bg-center cover aspect-ratio--object" />
199+
</div>
200+
<a href="#0" class="ph2 ph0-ns pb3 link db">
201+
<h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
202+
<h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
203+
</a>
204+
</article>
205+
</section>

‎src/templates/components-index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<body class="w-100 sans-serif">
1212
<%= header %>
1313
<main class="bg-white black-70 bt b--black-10">
14-
<header class="ph3 ph5-ns pv2">
14+
<header class="ph3 ph5-ns pt3">
1515
<% Object.keys(componentsForNav).map(function(category) { %>
1616
<a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#<%= category%>"><%= category %></a>
1717
<% }) %>

0 commit comments

Comments
 (0)