library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

A11y: Enhance card example (#953)

Browse Source 
The card needs more enhancements but I need more help to determine the perfect solution for it.

the issue we face is:
- the markup needs to change and when to change the markup the style needs to change to be suitable for it.
example:
`
  <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
  </a>
 <a href="#" class="card-footer-item">Save</a>
 <a href="#" class="card-footer-item">Edit</a>
 <a href="#" class="card-footer-item">Delete</a>
`
should be:
`
  <button class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
  </button>
<button class="card-footer-item">Save</button>
<button  class="card-footer-item">Edit</button>
<button class="card-footer-item">Delete</button>
`
when I do that the style change and when I use the `button` class name the style change also, so you need to try it and edit the style as you need to card show to people.

- I replaced the <small> with <time> but the time does not have the same `font-size` so you maybe need to set `font-size` to time
This commit is contained in:
Muhannad Abdelrazek 2017-09-09 13:33:25 +03:00 committed by Jeremy Thomas
parent 37bb5db8b7
commit c112e15c9a
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/documentation/components/card.html
View File

@ -23,14 +23,14 @@ variables:
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="descripe image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
<img src="{{site.url}}/images/placeholders/96x96.png" alt="descripe image">
</figure>
</div>
<div class="media-content">
@ -42,9 +42,9 @@ variables:
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
@ -56,24 +56,24 @@ variables:
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
<a href="#" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
<a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item">Save</a>
<a class="card-footer-item">Edit</a>
<a class="card-footer-item">Delete</a>
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
{% endcapture %}