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>
{% image "path-to-img", "alt-text" %}
<span slot="date"></span>
<span slot="tag" class="button post-tag"></span>
<span slot="tag" class="button"></span>
<h2 slot="headline"></h2>
<p slot="content"></p>
<footer slot="footer"></footer>
@ -52,7 +52,7 @@ title: 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" %}
<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>
<p slot="content">
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" %}
<span slot="date">18.02.1984</span>
<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>
<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>

28
src/pages/styleguide.njk
View file

@ -30,6 +30,34 @@ customGradients:
</p>
</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">
<section class="section__inner wrapper flow region">
<h2 class="heading-line">Colors</h2>