www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/fontyourface/templates/font.html.twig

   1 {#
   2 /**
   3  * @file font.html.twig
   4  * Default theme implementation to present Font data.
   5  *
   6  * This template is used when viewing Font pages.
   7  *
   8  *
   9  * Available variables:
  10  * - content: A list of content items. Use 'content' to print all content, or
  11  * - attributes: HTML attributes for the container element.
  12  *
  13  * @see template_preprocess_font()
  14  *
  15  * @ingroup themeable
  16  */
  17 #}
  18 <div{{ attributes.addClass('font') }}>
  19   {% if font_style %}
  20     <div>If you wish to use the font in your theme / css file, use:</div>
  21     <code>
  22       {{- font_style }}
  23     </code>
  24   {% endif %}
  25   <details open>
  26     <summary>Details</summary>
  27     <div class="details-wrapper">
  28       {% if content %}
  29         {{- content -}}
  30       {% endif %}
  31     </div>
  32   </details>
  33   <detail open>
  34     <summary>Preview</summary>
  35     <div class="fontyourface-preview" style="{{- font_style_inline }}">
  36       <h1>h1. This is a very large header.</h1>
  37       <h2>h2. This is a large header.</h2>
  38       <h3>h3. This is a medium header.</h3>
  39       <h4>h4. This is a moderate header.</h4>
  40       <h5>h5. This is a small header.</h5>
  41       <h6>h6. This is a tiny header.</h6>
  42
  43       <br>
  44
  45       <h1 class="subheader">h1. subheader</h1>
  46       <h2 class="subheader">h2. subheader</h2>
  47       <h3 class="subheader">h3. subheader</h3>
  48       <h4 class="subheader">h4. subheader</h4>
  49       <h5 class="subheader">h5. subheader</h5>
  50       <h6 class="subheader">h6. subheader</h6>
  51
  52       <hr>
  53
  54       <h3>Definition List</h3>
  55       <h5>Definition lists are great for small block of copy that describe the header</h5>
  56       <dl>
  57       <dt>Lower cost</dt>
  58         <dd>The new version of this product costs significantly less than the previous one!</dd>
  59       <dt>Easier to use</dt>
  60         <dd>We've changed the product so that it's much easier to use!</dd>
  61       <dt>Safe for kids</dt>
  62         <dd>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).</dd>
  63       </dl>
  64       <hr>
  65
  66       <h5>Un-ordered lists are great for making quick outlines bulleted.</h5>
  67       <ul class="disc">
  68         <li>List item with a much longer description or more content.</li>
  69         <li>List item</li>
  70         <li>List item
  71           <ul>
  72             <li>Nested List Item</li>
  73             <li>Nested List Item</li>
  74             <li>Nested List Item</li>
  75           </ul>
  76         </li>
  77         <li>List item</li>
  78         <li>List item</li>
  79         <li>List item</li>
  80       </ul>
  81
  82       <h5>Ordered lists are great for lists that need order, duh.</h5>
  83       <ol>
  84         <li>List Item 1</li>
  85         <li>List Item 2</li>
  86         <li>List Item 3</li>
  87       </ol>
  88
  89
  90
  91       <br>
  92       <h5>Blockquote</h5>
  93       <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
  94
  95       <br>
  96       <h5>Vcard</h5>
  97       <ul class="vcard">
  98         <li class="fn">Gaius Baltar</li>
  99         <li class="street-address">123 Colonial Ave.</li>
 100         <li class="locality">Caprica City</li>
 101         <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
 102         <li class="email"><a href="#">g.baltar@example.com</a></li>
 103       </ul>
 104     </div>
 105   </detail>
 106 </div>