2 base Base

Source: 00-config/_variables.scss, line 9

2.1 base.root Root

The HTML root component contains the doctype, HTML element, HEAD element and BODY element. It also contains the CSS for those elements and the * universal selector.

Source: 01-base/root/_root.scss, line 1

2.2 base.type Typography

Headings, paragraphs, blockquotes, lists, and more have some global resets.

Source: 01-base/text/_text.scss, line 1

2.2.1 base.type.font Font

The standard font Open social uses is Montserrat. We have included the font files with our theme. We bundle our theme with 3 different font weights you can use: 300, 500 and 700

Setting a custom font

Option 1

Use the social_font module to upload custom fonts and select you new font in the theme settings.

Option 2

Upload your font to the assets folder of your theme. Update the base component text/fonts and update the $font-family-webfont variable. Don't forget to compile the CSS again.

Source: 01-base/text/_fonts.scss, line 1

2.2.2 base.type.headings Headings

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example

A Heading Level 1 (h1) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Markup: 01-base/headings/headings.twig
<h1 class="{{modifier_class}}">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h2 class="{{modifier_class}}">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h3 class="{{modifier_class}}">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h4 class="{{modifier_class}}">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h5 class="{{modifier_class}}">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h6 class="{{modifier_class}}">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
Source: 01-base/headings/_headings.scss, line 1

2.2.4 base.type.text Text elements

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The elements in this section give semantics to inline text.

Example

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

The following snippets of text are rendered as bold text. Bold text nested inside italic text should still be bold.

The following snippets of text are rendered as italic text. Italic text nested inside bold text should still be italic

An abbreviation of the word attribute is attr. And HTML is an acroynm.

Mlle Gwendoline wrote the equation f(x, n) = log4xn.

Markup: 01-base/text/text.twig
<p>The default font-size and line-height properties are applied to the <code>&lt;body&gt;</code> element and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin.</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
    text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
    <strong>bold</strong></em>.</p>
<p>The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
  Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
    <em>italic</em></strong></p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
  And <abbr title="HyperText Markup Language">HTML</abbr> is an acroynm.</p>
<p><abbr>M<sup>lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub>4</sub>x<sup class="">n</sup></code>.</p>
Source: 01-base/text/_text.scss, line 9

2.2.5 base.type.address Addresses

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Example
Open Social HQ
Singel 542
1017 AZ Amsterdam
P: (123) 456-7890
Full Name
first.last@example.com
Markup: 01-base/text/address.twig
<address>
  <strong>Open Social HQ</strong><br>
  Singel 542<br>
  1017 AZ Amsterdam<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
Source: 01-base/text/_text.scss, line 19

2.2.6 base.type.blockquotes Blockquotes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Markup: 01-base/text/blockquote.twig
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Source: 01-base/text/_text.scss, line 30

2.2.7 base.type.h-rule Horizontal rule

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Markup: 01-base/text/hr.twig
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
  dolor id nibh ultricies vehicula.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
  ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
Source: 01-base/text/_text.scss, line 41

2.3 base.code Code

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <code> element represents a fragment of computer code.
The <var> element represents a variable.
The <samp> element represents (sample) output from a program or computing system.
The <kbd> element represents user input (typically keyboard input.)

Example

The code element represents a fragment of computer code.

There are y = mx + b flavors of ice cream to be available for purchase!

This text is meant to be treated as sample output from a computer program.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Markup: 01-base/code/code.twig
<p>The <code>code</code> element represents a fragment of computer code.</p>
<p>There are <var><var>y</var> = <var>m</var><var>x</var> + <var>b</var></var> flavors of ice cream to be available for purchase!</p>
<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>
Source: 01-base/code/_code.scss, line 1

2.4 base.lists Lists

Source: 01-base/lists/_lists.scss, line 1

2.4.1 base.lists.ul Unordered list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <ul> element is a list of items in which the order does not explicitly matter.

Example
  • Sit Ullamcorper Ultricies
  • Tortor
  • Mollis
  • Dolor
    • Cursus
    • Cras
    • Pellentesque
    • Egestas Sem
  • Cursus Malesuada
  • Fermentum Tellus
Markup: 01-base/lists/ul.twig
<ul>
  <li>Sit Ullamcorper Ultricies</li>
  <li>Tortor</li>
  <li>Mollis</li>
  <li>Dolor
    <ul>
      <li>Cursus</li>
      <li>Cras</li>
      <li>Pellentesque</li>
      <li>Egestas Sem</li>
    </ul>
  </li>
  <li>Cursus Malesuada</li>
  <li>Fermentum Tellus</li>
</ul>
Source: 01-base/lists/_lists.scss, line 7

2.4.2 base.lists.ol Ordered list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <ol> element is a list of items in which the order does explicitly matter.

Example
  1. Sit Ullamcorper Ultricies
  2. Tortor
  3. Mollis
  4. Dolor
    1. Cursus
    2. Cras
    3. Pellentesque
    4. Egestas Sem
  5. Cursus Malesuada
  6. Fermentum Tellus
Markup: 01-base/lists/ol.twig
<ol>
  <li>Sit Ullamcorper Ultricies</li>
  <li>Tortor</li>
  <li>Mollis</li>
  <li>Dolor
    <ol>
      <li>Cursus</li>
      <li>Cras</li>
      <li>Pellentesque</li>
      <li>Egestas Sem</li>
    </ol>
  </li>
  <li>Cursus Malesuada</li>
  <li>Fermentum Tellus</li>
</ol>
Source: 01-base/lists/_lists.scss, line 16

2.4.3 base.lists.dl Description list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <dl> element is a list of terms with their associated descriptions.

Example
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Markup: 01-base/lists/dl.twig
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
Source: 01-base/lists/_lists.scss, line 27

2.5 base.tables Tables

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The <table> element displays tabular data in rows, columns, and cells.

Example
Optional table caption.
Member Organisation Role Action
Chris Hall Receptionist at Bastion Hotels Member
Michelle Williams Community manager at Open Social Group organiser
Jim Oyster Plumber at Forgottoflush Member
Markup: 01-base/tables/table.twig
<table>
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>Member</th>
      <th>Organisation</th>
      <th>Role</th>
      <th>Action</th>
    </tr>
  </thead>

  <tbody>
  <tr>
    <td><a href="#">Chris Hall</a></td>
    <td>Receptionist at Bastion Hotels</td>
    <td>Member</td>
    <td>
      <div class="btn-group">
        <button type="button" autocomplete="off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary btn-sm btn-raised dropdown-toggle">Manage<span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Edit</a></li>
          <li><a href="#">Remove</a></li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td><a href="#">Michelle Williams</a></td>
    <td>Community manager at Open Social</td>
    <td>Group organiser</td>
    <td>
      <div class="btn-group">
        <button type="button" autocomplete="off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary btn-sm btn-raised dropdown-toggle">Manage<span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Edit</a></li>
          <li><a href="#">Remove</a></li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td><a href="#">Jim Oyster</a></td>
    <td>Plumber at Forgottoflush </td>
    <td>Member</td>
    <td>
      <div class="btn-group">
        <button type="button" autocomplete="off" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-primary btn-sm btn-raised dropdown-toggle">Manage<span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Edit</a></li>
          <li><a href="#">Remove</a></li>
        </ul>
      </div>
    </td>
  </tr>
  </tbody>
</table>
Source: 01-base/tables/_tables.scss, line 3

2.6 base.embedded Embedded content

Source: 01-base/embedded/_embedded.scss, line 1

2.6.1 base.embedded.img Images

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

An <img> element represents an image. We are using the following image styles in Drupal. You can use devtools to inspect images.

Name Sizes Effects Example
Social extra extra large 1200 x 423 Scale & crop Hero background
Social extra large 220 x 220 Scale & crop Event teaser
Social large 128 x 128 Scale & crop Profile image
Social medium 44 x 44 Scale & crop Stream avatar
Social small 24 x 24 Scale & crop Newest members listd
Example

An image that is inline with other text.

An image inside a figure.
Markup: 01-base/embedded/embedded-img.twig
<p>An image <img src="kss-assets/sample-inline.png"> that is inline with other text.</p>

<figure style="width: 50%; max-width: 300px;">
  <figcaption>An image inside a figure.</figcaption>
  <img src="kss-assets/sample.png">
</figure>
Source: 01-base/embedded/_embedded.scss, line 7

2.6.2 base.embedded.svg Scalable vector

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A <svg> element represents an image encoded as a Scalable Vector Graphic.

Example

A svg image that is inline with other text.

A svg inside a figure.
Markup: 01-base/embedded/embedded-svg.twig
<p>A svg image <svg fill="#000000" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
    <path d="M0 0h24v24H0z" fill="none"/>
  </svg> that is inline with other text.</p>

<figure style="width: 50%; max-width: 300px;">
  <figcaption>A svg inside a figure.</figcaption>
  <svg width="300px" height="250px" viewBox="0 0 60 50" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <rect x="0" y="0" width="60" height="50"></rect>
      <g transform="translate(15.000000, 10.000000)" fill="#29abe2">
        <g>
          <path d="M17.5625,15.9375 C17.0625,15.9375 16.8125,15.9375 16.75,16 L16.0625,16.0625 L16,16.75 C16,16.9375 15.625,20.8125 17.875,23.125 C19.375,24.625 21.1875,25.5 22.6875,25.5 C23.5,25.5 24.1875,25.25 24.6875,24.75 C26.125,23.3125 25.4375,20.25 23.0625,17.875 C21.4375,16.1875 18.9375,15.9375 17.5625,15.9375 L17.5625,15.9375 Z M23.5625,23.5 C23.375,23.6875 23.0625,23.75 22.6875,23.75 L22.6875,23.75 C21.875,23.75 20.4375,23.25 19.0625,21.8125 C17.875,20.625 17.625,18.5625 17.625,17.5 C18.75,17.5 20.6875,17.75 21.9375,18.9375 C22.8125,19.8125 23.4375,20.8125 23.6875,21.6875 C23.9375,22.5625 23.875,23.1875 23.5625,23.5 L23.5625,23.5 Z" id="Shape"></path>
          <path d="M7.125,12.3125 C8.8125,14 11.3125,14.25 12.6875,14.25 C13.125,14.25 13.4375,14.25 13.5,14.1875 L14.1875,14.125 L14.25,13.4375 C14.25,13.25 14.625,9.375 12.375,7.0625 C10.875,5.5625 9.0625,4.6875 7.5625,4.6875 C6.75,4.6875 6.0625,4.9375 5.5625,5.4375 C4.8125,6.1875 4.625,7.3125 4.9375,8.5625 C5.25,9.875 6,11.1875 7.125,12.3125 L7.125,12.3125 Z M6.6875,6.625 C6.875,6.4375 7.1875,6.375 7.5625,6.375 C8.375,6.375 9.8125,6.875 11.1875,8.3125 C12.375,9.5 12.625,11.5625 12.625,12.625 C11.5,12.625 9.5625,12.375 8.3125,11.1875 C7.4375,10.3125 6.8125,9.3125 6.5625,8.4375 C6.3125,7.5625 6.375,6.9375 6.6875,6.625 L6.6875,6.625 Z"></path>
          <path d="M14.25,16.6875 L14.1875,16 L13.5,15.9375 C13.4375,15.9375 13.1875,15.875 12.6875,15.875 C11.3125,15.875 8.8125,16.125 7.125,17.8125 C4.75,20.1875 4,23.1875 5.5,24.6875 C6,25.1875 6.6875,25.4375 7.5,25.4375 C9,25.4375 10.8125,24.5625 12.3125,23.0625 C14.625,20.75 14.25,16.875 14.25,16.6875 L14.25,16.6875 Z M12.625,17.5625 C12.625,18.625 12.4375,20.625 11.1875,21.875 C9.75,23.3125 8.375,23.8125 7.5625,23.8125 L7.5625,23.8125 C7.1875,23.8125 6.875,23.6875 6.6875,23.5625 C6.125,23 6.375,21.0625 8.3125,19.0625 C9.5,17.8125 11.5,17.625 12.625,17.5625 L12.625,17.5625 Z"></path>
          <path d="M16,13.4375 L16.0625,14.125 L16.75,14.1875 C16.8125,14.1875 17.125,14.25 17.5625,14.25 C18.9375,14.25 21.4375,14 23.125,12.3125 C24.25,11.1875 25.0625,9.875 25.375,8.625 C25.6875,7.3125 25.5,6.1875 24.75,5.5 C24.25,5 23.5625,4.75 22.75,4.75 C21.25,4.75 19.4375,5.625 17.9375,7.125 C15.625,9.375 16,13.25 16,13.4375 L16,13.4375 Z M17.625,12.5625 C17.625,11.5 17.8125,9.5 19.0625,8.25 C20.5,6.8125 21.875,6.3125 22.6875,6.3125 C23.0625,6.3125 23.375,6.4375 23.5625,6.5625 C23.875,6.875 23.9375,7.5 23.6875,8.3125 C23.4375,9.25 22.8125,10.1875 21.9375,11.0625 C20.75,12.3125 18.75,12.5625 17.625,12.5625 L17.625,12.5625 Z"></path>
          <path d="M26,11.5625 L25.8125,11.5 L25.6875,11.6875 C25.4375,12 25.25,12.3125 24.9375,12.625 L24.5625,13.0625 L25.125,13.125 C27.125,13.375 28.3125,14.3125 28.3125,15.0625 C28.3125,15.8125 27.125,16.75 25.125,17 L24.5625,17.0625 L24.9375,17.5 C25.1875,17.8125 25.4375,18.125 25.6875,18.4375 L25.8125,18.625 L26,18.5625 C28.4375,18.0625 30,16.6875 30,15.0625 C30,13.4375 28.4375,12.0625 26,11.5625 L26,11.5625 Z"></path>
          <path d="M4.5,18.625 L4.625,18.4375 C4.8125,18.125 5.0625,17.8125 5.375,17.5 L5.75,17.0625 L5.1875,17 C3.1875,16.75 2,15.8125 2,15.0625 C2,14.3125 3.1875,13.375 5.1875,13.125 L5.75,13.0625 L5.375,12.625 C5.125,12.3125 4.875,12 4.625,11.6875 L4.5,11.5 L4.3125,11.5625 C1.875,12.0625 0.3125,13.4375 0.3125,15.0625 C0.3125,16.6875 1.875,18.0625 4.3125,18.5625 L4.5,18.625 L4.5,18.625 Z"></path>
          <path d="M17.5625,24.875 L17.125,24.5 L17.0625,25.0625 C16.8125,27.0625 15.875,28.25 15.125,28.25 C14.375,28.25 13.4375,27.0625 13.1875,25.0625 L13.125,24.5 L12.6875,24.875 C12.375,25.125 12.0625,25.375 11.75,25.625 L11.5625,25.75 L11.625,25.9375 C12.125,28.375 13.5,29.9375 15.125,29.9375 C16.75,29.9375 18.125,28.375 18.625,25.9375 L18.6875,25.75 L18.5,25.625 C18.1875,25.375 17.875,25.125 17.5625,24.875 L17.5625,24.875 Z"></path>
          <path d="M12.6875,5.3125 L13.125,5.6875 L13.1875,5.125 C13.4375,3.0625 14.375,1.875 15.125,1.875 C15.875,1.875 16.8125,3.0625 17.0625,5.0625 L17.125,5.625 L17.5625,5.25 C17.875,5 18.1875,4.75 18.5,4.5 L18.6875,4.375 L18.625,4.1875 C18.125,1.75 16.75,0.1875 15.125,0.1875 C13.5,0.1875 12.125,1.75 11.625,4.1875 L11.5625,4.375 L11.75,4.5 C12.0625,4.75 12.375,5 12.6875,5.3125 L12.6875,5.3125 Z"></path>
        </g>
      </g>
    </g>
  </svg>

</figure>
Source: 01-base/embedded/_embedded.scss, line 27