Component Library

Molecule Example 

<div class="molecule-example">
    <h2 class="molecule-example__heading">Molecule example heading</h2>
    <div class="molecule-example__solid-pattern">
        <p class="molecule-example__text">Solid: We need a similar pattern, but want to make changes to it. Useful e.g. when wanting to add :hover effects to parent.</p>
    </div>
    <div class="molecule-example__dry-pattern">
        <p class="atom-example">Dry: We can reuse @atom-example and don&#x27;t need to make changes to it.</p>
    </div>
</div>
 
<div class="molecule-example">
    <h2 class="molecule-example__heading">{{ heading }}</h2>
    <div class="molecule-example__solid-pattern">
        <p class="molecule-example__text">{{ text }}</p>        
    </div>
    <div class="molecule-example__dry-pattern">
        {{> '@atom-example' atomExample }}
    </div>
</div>
 
{
  "heading": "Molecule example heading",
  "text": "Solid: We need a similar pattern, but want to make changes to it. Useful e.g. when wanting to add :hover effects to parent.",
  "atomExample": {
    "text": "Dry: We can reuse @atom-example and don't need to make changes to it."
  }
}
  • Content: 
    /*
 * Molecule Example
 */

:root {
    --molecule-example__text-color: var(--color-berry);
}

.molecule-example {
    &:hover {
        .molecule-example__text {
            text-decoration: underline;
        }    
    }

    &__text {
        color: var(--molecule-example__text-color);
    }
}
  • URL: /components/raw/molecule-example/molecule-example.css
  • Filesystem Path: src/00-examples/molecule-example/molecule-example.css
  • Size: 298 Bytes

There are no notes for this item.