wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

document button styling

Browse source
This commit is contained in:
madrilene 2024-11-29 18:10:37 +01:00
parent ddbbff3fd2
commit d1e3507b16
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/docs/card.njk
View file

@ -39,7 +39,7 @@ title: Card
<custom-card> <custom-card>
{% image "path-to-img", "alt-text" %} {% image "path-to-img", "alt-text" %}
<span slot="date"></span> <span slot="date"></span>
<span slot="tag" class="button post-tag"></span> <span slot="tag" class="button"></span>
<h2 slot="headline"></h2> <h2 slot="headline"></h2>
<p slot="content"></p> <p slot="content"></p>
<footer slot="footer"></footer> <footer slot="footer"></footer>
@ -52,7 +52,7 @@ title: Card
<custom-card> <custom-card>
{% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %} {% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
<span slot="date">1516</span> <span slot="date">1516</span>
<span slot="tag" class="button post-tag">Default</span> <span slot="tag" class="button" data-small-button>Default</span>
<h2 slot="headline">Utopia</h2> <h2 slot="headline">Utopia</h2>
<p slot="content"> <p slot="content">
Among them, there is no sort of traffic, no knowledge of letters, no understanding of numbers, no name Among them, there is no sort of traffic, no knowledge of letters, no understanding of numbers, no name
@ -66,7 +66,8 @@ title: Card
{% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %} {% image "./src/assets/images/gallery/asturias-3.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves" %}
<span slot="date">18.02.1984</span> <span slot="date">18.02.1984</span>
<div slot="tag" webc:nokeep> <div slot="tag" webc:nokeep>
<span class="button post-tag">clickable</span><span class="button post-tag">square image</span> <span class="button" data-small-button>clickable</span
><span class="button" data-small-button>square image</span>
</div> </div>
<footer slot="footer"><a href="#">Link in the footer makes whole card a link</a></footer> <footer slot="footer"><a href="#">Link in the footer makes whole card a link</a></footer>
<h2 slot="headline">The order does not matter</h2> <h2 slot="headline">The order does not matter</h2>

28
src/pages/styleguide.njk
View file

@ -30,6 +30,34 @@ customGradients:
</p> </p>
</header> </header>
<section class="flow region region-space-m">
<h2 class="heading-line">Buttons</h2>
<ul class="cluster" role="list">
<li>
<a href="#" class="button">Default button</a>
</li>
<li>
<a href="#" class="button" data-button-variant="primary">blue button</a>
</li>
<li>
<a href="#" class="button" data-button-variant="secondary">red button</a>
</li>
<li>
<a href="#" class="button" data-button-variant="tertiary">yellow button</a>
</li>
<li>
<a href="#" class="button" data-ghost-button>Ghost button</a>
</li>
<li>
<a href="#" class="button" data-button-radius="hard">Hard edges</a>
</li>
<li>
<a href="#" class="button"> {% svg "misc/star" %} Button with icon </a>
</li>
</ul>
</section>
<div class="full colors | section"> <div class="full colors | section">
<section class="section__inner wrapper flow region"> <section class="section__inner wrapper flow region">
<h2 class="heading-line">Colors</h2> <h2 class="heading-line">Colors</h2>