<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: 294 Bytes

There are no notes for this item.