DDI

<No title set>

HTML Elements

An a element without any class attribute gets the standard anchor styling.

a elements without classes

Central to the web, is the anchor element.

If the element has no href set, it should be visible. We don’t use links for other behavior than navigation. When it has no href, it should be apparent.

<p>Central to the web, is the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a%22">anchor
        element</a>.</p>
<p>If the element has no <code>href</code> set, it should be visible. We don’t use links for other behavior than navigation.
    When it has <a>no href</a>, it should be apparent.</p>

As soon as you add a class attribute, the default ddi and browser styling is removed.

a element with a class

Central to the web, is theanchor element.

<p>Central to the web, is the<a class="foo" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">anchor element</a>.</p>

There is an exception, and it’s the class variant. Add it and you get a link only is underscored when hovered. This class also allows you to add other classes without removing the link styling.

a elements with the variant class
HomeProductsServicesAbout
<div class="x-flow items:center justify:center"><a class="variant color:rgb(123,34,223) font-weight:bold" href="/">Home</a><a class="variant color:rgb(123,34,223) font-weight:bold" href="/products">Products</a><a class="variant color:rgb(123,34,223) font-weight:bold" href="/services">Services</a><a class="variant color:rgb(123,34,223) font-weight:bold" href="/about">About</a></div>

Sometimes we want links to look like buttons.

Link buttons

Primary link button

Secondary link button

Tertiary link button

<div class="flow"><a class="button" href="#">
        <p>Primary link button</p>
    </a><a class="button secondary" href="#">
        <p>Secondary link button</p>
    </a><a class="button tertiary" href="#">
        <p>Tertiary link button</p>
    </a></div>

Lists

There are standard lists in .body-text elements:

Ordered list

Below a list of items

  1. First item
  2. Second item
  3. Third item
<div class="body-text">
    <p>Below a list of items</p>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>
</div>
Unordered list

Below a list of items

  • Volvo
  • SAAB
  • Opel
<div class="body-text">
    <p>Below a list of items</p>
    <ul>
        <li>Volvo</li>
        <li>SAAB</li>
        <li>Opel</li>
    </ul>
</div>
Lined unordered list
  • Volvo
  • Mercedes
  • Honda
<ul class="lined">
    <li>Volvo</li>
    <li>Mercedes</li>
    <li>Honda</li>
</ul>
List menu
<ul class="lined menu">
    <li><a href="https://volvo.com">Volvo</a></li>
    <li><a href="https://mercedes.com">Mercedes</a></li>
    <li><a href="https://honda.com">Honda</a></li>
</ul>