Page Title | Site Name

File

file name (115.83 KB)

HTML

									
										<div class="file">
  <img class="file__icon" alt="application/pdf" src="../../drupal/images/application-pdf.png">
  <a href="#" class="file__link">file name</a>
  <span class="file__size">(115.83 KB)</span>
</div>

Messages

Warning message

This is a warning message about something that should be noted. This is a link.

HTML

									
										<div class="messages messages--status" role="alertdialog">
  <h2 class="element-invisible">Status message</h2>
  This is a status message about <em class="placeholder">something</em> that has been updated. <a href="#">This is a link</a>.
</div>

<div class="messages messages--warning">
  <h2 class="element-invisible">Warning message</h2>
  This is a warning message about <em class="placeholder">something</em> that should be noted. <a href="#">This is a link</a>.
</div>

<div class="messages messages--error" role="alertdialog">
  <h2 class="element-invisible">Error message</h2>
  This is an error message about <em class="placeholder">something</em> that went wrong. <a href="#">This is a link</a>.
</div>

<div class="messages messages--error" role="alertdialog">
  <h2 class="element-invisible">Error message</h2>
  <ul class="messages__list">
    <li class="messages__item">This is an error message. There are multiple error messages here.</li>
    <li class="messages__item">This is another error message about <em class="placeholder">something</em> that went wrong:<br>Description of what went wrong.</li>
  </ul>
</div>

Progress Bar

57%

This is the description for this progress bar.

HTML

									
										<div class="progress">
  <div class="progress__track">
  <div class="progress__bar" style="width: 57%"></div>
  </div>
  <div class="progress__percentage">57%</div>
  <div class="progress__description">This is the description for this progress bar.</div>
</div>