UNPKG

@cnbritain/wc-card

Version:

Card component - Portrait, landscape and switcher

github.com/cnduk/wc-card

cnduk/wc-card

50 lines (43 loc) • 3.26 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{%- from "template/macro.html" import card -%} <!DOCTYPE html> <html> <head> <style type="text/css">{{ css|safe }}</style> </head> <body> <h1>wc-card Demo</h1> <p>Card component - Portrait, landscape and switcher</p> <h2>Portrait</h2> {{- card(article, card_type='portrait', brand='glamour', image_sources=[('landscape')]) -}} <hr /> {{- card(article, card_type='portrait', brand='glamour', image_sources=[('portrait')]) -}} <hr /> {{- card(article, card_type='portrait', brand='glamour', image_sources=[('square')]) -}} <h2>Landscape</h2> {{- card(article, card_type='landscape', brand='glamour', image_sources=[('landscape')]) -}} <hr /> {{- card(article, card_type='landscape', brand='glamour', image_sources=[('portrait')]) -}} <hr /> {{- card(article, card_type='landscape', brand='glamour', image_sources=[('square')]) -}} <h2>Switcher</h2> {{- card(article, card_type='switcher', brand='glamour', image_sources=[('square')]) -}} <hr /> {{- card(article, card_type='switcher', brand='glamour', image_sources=[('square'), (700, 'landscape')]) -}} <hr /> {{- card(article, card_type='switcher', brand='glamour', image_sources=[('square'), (700, 'portrait')]) -}} <h2>Inline - Light</h2> {{- card(article, card_type='inline', brand='glamour', image_sources=[('square',)]) -}} <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi itaque corrupti quos alias, saepe exercitationem, voluptates amet suscipit facere. Nihil deserunt ipsam, aliquam, eos recusandae aut neque quod architecto delectus.</p> <p>Quia nisi id atque quae impedit optio corporis esse nesciunt voluptatibus, illo officia deserunt quibusdam totam voluptas saepe nihil dolor consectetur vitae illum, ullam, repellat vel cupiditate? Quas, dolorum, saepe.</p> <p>Architecto, et. Possimus tempora omnis facere. Perspiciatis, qui totam temporibus error amet voluptate, ea praesentium sit distinctio magnam debitis tenetur quasi magni autem quo saepe dolorem! Facere dicta, est unde.</p> <p>Temporibus tenetur voluptatum iure, esse, deserunt eligendi delectus repudiandae repellendus doloremque, cum ea odit nobis tempore itaque odio id quasi, ut doloribus deleniti ex! Culpa autem qui perferendis ducimus cum.</p> <p>Voluptates reiciendis sint optio exercitationem. Nihil maxime libero fugiat quae, dolorum necessitatibus culpa illo repellendus temporibus earum ea cum distinctio repellat similique! Suscipit, vel, explicabo eveniet est voluptatum dolor. Excepturi.</p> <p>Repellat minus alias, esse veritatis perferendis, ipsa eos ab mollitia quod qui maiores. Architecto voluptatum facilis molestiae, error? Quisquam nam architecto sed eos mollitia, dignissimos tempore provident qui temporibus. Illum.</p> <h2>Thumbnail</h2> {{- card(article, card_type='thumbnail', brand='glamour', image_gallery_order=[0, 1, 2], image_sources=[('square')]) -}} <script type="text/javascript">{{ js|safe }}</script> <script type="text/javascript"> DEMO.init(); </script> </body> </html>