Alert


<div class="alert" role="alert">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus.
</div>

<div class="alert" aria-labelledby="alert-02--heading" role="alert">
  <h4 id="alert-02--heading">Alert heading</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus.
</div>
Default .alert and .alert with heading.
Alert looks
Primary

Secondary

Success

Info

Warning

Danger
<div class="alert primary" role="alert">
  Alert primary. ...
</div>

<div class="alert secondary" role="alert">
  Alert secondary. ...
</div>

<div class="alert success" role="alert">
  Alert success. ...
</div>

<div class="alert info" role="alert">
  Alert info. ...
</div>

<div class="alert warning" role="alert">
  Alert warning. ...
</div>

<div class="alert danger" aria-labelledby="alert-08--heading" role="alert">
  <h4 id="alert-08--heading">Alert danger</h4>
  ...
</div>
.alert with class .primary, .secondary, .success, .info, .warning and .danger.
Alert dialog

Default alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Quod cum dixissent, ille contra. Quare conare, quaeso.

Text element
<div class="alertdialog" aria-labelledby="alertdialog-01--heading" aria-describedby="alertdialog-01--content" role="alertdialog">
  <header>
    <h4 id="alertdialog-01--heading">Default alertdialog header</h4>
  </header>

  <div id="alertdialog-01--content" role="document" tabindex="0">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. <strong>Quod cum dixissent, ille contra.</strong> <a href="http://loripsum.net/" target="_blank">Quare conare, quaeso.</a></p>
  </div>

  <footer>
    <span class="space--after">Text element</span>
    <label class="swc" for="alert-swc-0001">
      <span>Switch</span>
      <input id="alert-swc-0001" type="checkbox">
      <span class="thumb"></span>
    </label>
    <label class="chk" for="alert-checkbox-0001">
      <input id="alert-checkbox-0001" name="checkbox" type="checkbox">
      <span>Checkbox</span>
    </label>
    <button class="btn" type="button">Button</button>
  </footer>
</div>
Default .alertdialog.
Alert dialog looks
Primary

Primary alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Quod cum dixissent, ille contra. Quare conare, quaeso.


Secondary

Secondary alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Quod cum dixissent, ille contra. Quare conare, quaeso.


Success

Success alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quare conare, quaeso.


Info

Info alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Quod cum dixissent, ille contra. Quare conare, quaeso.


Warning

Warning alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Quod cum dixissent, ille contra. Quare conare, quaeso.


Danger

Danger alertdialog header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Quod cum dixissent, ille contra. Quare conare, quaeso.

<div class="alertdialog primary" role="alertdialog" aria-labelledby="alertdialog-01-label" aria-describedby="alertdialog-01-description">
  <header>
    <h4 id="alertdialog-01-label">Primary alertdialog header</h4>
  </header>

  <div id="alertdialog-01-description" role="document" tabindex="0">
    ...
  </div>
</div>

<div class="alertdialog secondary" role="alertdialog" aria-labelledby="alertdialog-02-label" aria-describedby="alertdialog-02-description">
  <header>
    <h4 id="alertdialog-02-label">Secondary alertdialog header</h4>
  </header>

  <div id="alertdialog-02-description" role="document" tabindex="0">
    ...
  </div>
</div>

<div class="alertdialog success" role="alertdialog" aria-labelledby="alertdialog-03-label" aria-describedby="alertdialog-03-description">
  <header>
    <h4 id="alertdialog-03-label">Success alertdialog header</h4>
  </header>

  <div id="alertdialog-03-description" role="document" tabindex="0">
    ...
  </div>
</div>

<div class="alertdialog info" role="alertdialog" aria-labelledby="alertdialog-04-label" aria-describedby="alertdialog-04-description">
  <header>
    <h4 id="alertdialog-04-label">Info alertdialog header</h4>
  </header>

  <div id="alertdialog-04-description" role="document" tabindex="0">
    ...
  </div>
</div>

<div class="alertdialog warning" role="alertdialog" aria-labelledby="alertdialog-05-label" aria-describedby="alertdialog-05-description">
  <header>
    <h4 id="alertdialog-05-label">Warning alertdialog header</h4>
  </header>

  <div id="alertdialog-05-description" role="document" tabindex="0">
    ...
  </div>
</div>

<div class="alertdialog danger" role="alertdialog" aria-labelledby="alertdialog-06-label" aria-describedby="alertdialog-06-description">
  <header>
    <h4 id="alertdialog-06-label">Danger alertdialog header</h4>
  </header>

  <div id="alertdialog-06-description" role="document" tabindex="0">
    ...
  </div>
</div>
.alertdialog with class .primary, .secondary, .success, .info, .warning and .danger.

Bar

Bar compounds accept this set of classes:

App
.app
Top
.top
Bottom
.bottom
My app name
<div class="bar">

  <button class="bar-btn-icn" type="button">
    <img alt="" src="https://puxl.io/img/puxl-icons/arrow-w.svg" aria-hidden="true">
    <span>Back</span>
  </button>

  My app name

  <button class="bar-btn-icn space--before" type="button">
    <img alt="" src="https://puxl.io/img/puxl-icons/menu-3-dots-v.svg" aria-hidden="true">
    <span>Open options menu</span>
  </button>

</div>
div.bar with navigation buttons
App bar
(There is one in this page. See the top navigation)
<div id="app-bar" class="app bar top">

  <header>

    <a class="home" href="https://puxl.io/">
      <img alt="" src="https://puxl.io/img/logo/puxl.svg">
      <span>PUXL Docs</span>
    </a>

    <button
      id="app-bar__toggler"
      class="bar-btn-icn toggler mobile--down space--before"
      aria-haspopup="true"
      aria-controls="app-bar__menu"
      aria-expanded="true"
      type="button">
      <img alt="" src="https://puxl.io/img/puxl-icons/menu-burger.svg" aria-hidden="true">
      <span>Open navigation menu</span>
    </button>

  </header>

  <nav role="navigation">

    <div id="app-bar__menu" class="subheading" aria-hidden="false">

      <ul class="space--after">
        <li>
          <a href="https://puxl.io/">
            PUXL framework
          </a>
        </li>
        <li>
          <a href="https://puxl.io/puxl-icons/">
            PUXL icons
          </a>
        </li>
      </ul>

      <a class="bar-btn-icn" href="https://github.com/puxl/puxl-framework" role="button">
        <img alt="" src="https://puxl.io/img/logo/github.svg" aria-hidden="true">
        <span>PUXL framework repository on GitHub</span>
      </a>

      <a class="bar-btn-icn" href="https://t.me/joinchat/AoC6ohKwoJDMIiqe_e01cA" role="button">
        <img alt="" src="https://puxl.io/img/logo/telegram.svg" aria-hidden="true">
        <span>PUXL channel on Telegram</span>
      </a>

    </div>

  </nav>

</div>
div.app.bar with heading, navigation section and extra buttons.

Breadcrumbs

<nav class="breadcrumbs" aria-label="Breadcrumbs to this page">
  <ol>
    <li>
      <a href="#compound__breadcrumbs">Link 1</a>
    </li>
    <li>
      <a href="#compound__breadcrumbs">Link 2</a>
    </li>
    <li>
      Text
    </li>
  </ol>
</nav>
nav with class .breadrumbs.
Breadcrumbs with aria-current=""
<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li>
      <a href="#compound__breadcrumbs">Link 1</a>
    </li>
    ...
    <li aria-current="page">
      Text
    </li>
  </ol>
</nav>

<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li>
      <a href="#">Link 1</a>
    </li>
    ...
    <li>
      <a href="#compound__breadcrumbs" aria-current="page">Link 3</a>
    </li>
  </ol>
</nav>
Breadrumbs ending in text and in link.

Card

Card compounds accept this set of classes:

Elevated
.elevated
Looks
Default, .primary, .secondary, .success, .info, .warning and .danger
Shapes
.capsule, .round and .square
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.
<div class="card">
  ...
</div>

<div class="card">
  <div class="content">
    ...
  </div>
</div>

<div class="card elevated">
  <div class="content">
    ...
  </div>
</div>
Default .card and with class .elevated.
Card looks
Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.
<div class="card primary">
  <div class="content">...</div>
</div>

<div class="card secondary">
  <div class="content">...</div>
</div>

<div class="card success">
  <div class="content">...</div>
</div>

<div class="card info">
  <div class="content">...</div>
</div>

<div class="card warning">
  <div class="content">...</div>
</div>

<div class="card danger">
  <div class="content">...</div>
</div>
.card with class .primary, .secondary, .success, .info, .warning and .danger.
Card shapes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.
<div class="card capsule">
  <div class="content">...</div>
</div>

<div class="card round">
  <div class="content">...</div>
</div>

<div class="card square">
  <div class="content">...</div>
</div>
.card with class .capsule, .round and .square.
Card structure
header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.
footer
<div class="card">
  <header>
    Header
  </header>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo.
  </div>
  <footer>
    <button class="btn ghost secondary" type="button">Cancel</button>
    <button class="btn solid primary" type="button">Accept</button>
  </footer>
</div>

<div class="card">
  <header>
    ...
  </header>
  <div class="content">
    ...
  </div>
</div>

<div class="card">
  <div class="content">
    ...
  </div>
  <footer>
    ...
  </footer>
</div>
.card structure with header, content and footer.
Card list simple
  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5
<div class="card">
  <ul class="list">
    ...
  </ul>
</div>

<div class="card">
  <div class="content">
    <ul class="list">
      ...
    </ul>
  </div>
</div>
Card list simple, inside .card, and inside .content.
Card list two lines
  • List item 1 List item description.
  • List item 2 lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. List item description ita tanta sit in finibus bonorum malorumque dissimilitudo. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Duo Reges: constructio interrete. Qui est in parvis malis.
  • List item 3 List item description.
<div class="card">
  <ul class="list">
    <li>
      <span class="heading">List item 1</span>
      <span class="description">List item description.</span>
    </li>
    <li>
      <span class="heading">List item 2 ...</span>
      <span class="description">List item description ...</span>
    </li>
    <li>
      <span class="heading">List item 3</span>
      <span class="description">List item description.</span>
    </li>
  </ul>
</div>
Card list with two lines: heading and description.
Card Image
<div class="card">
  <img alt="" src="..."/>
</div>
Card with image.
Card Image and content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo. Sed ille, ut dixi, vitiose. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum.


Card heading

Subheading lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Ita fit ut, quanta differentia est in principiis naturalibus, tanta sit in finibus bonorum malorumque dissimilitudo. Sed ille, ut dixi, vitiose. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum.

<div class="card">
  <img alt="" src=""/>
  <div class="content">
    <p>...</p>
    <button class="btn" type="button">...</button>
  </div>
</div>

<div class="card">
  <img alt="" src=""/>
  <header>
    <div class="heading">...</div>
    <p>...</p>
  </header>
  <div class="content">
    <p>....</p>
    <button class="btn" type="button">...</button>
  </div>
</div>
Cards with image and content.

Disclosure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur laoreet massa. Nam eu porta dolor. Vestibulum pulvinar lorem et nisl tempor lacinia.

Cras mi nisl, semper ut gravida sed, vulputate vel mauris. In dignissim aliquet fermentum. Donec arcu nunc, tempor sed nunc id, dapibus ornare dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur laoreet massa. Nam eu porta dolor. Vestibulum pulvinar lorem et nisl tempor lacinia.

Cras mi nisl, semper ut gravida sed, vulputate vel mauris. In dignissim aliquet fermentum. Donec arcu nunc, tempor sed nunc id, dapibus ornare dolor.

<div class="disclosure">
  <h3>
    <button>disclosure 01 header</button>
  </h3>
  <div aria-hidden="false">
    <p>Lorem ipsum...</p>
    <p>Cras mi nisl...</p>
  </div>
</div>

<div class="disclosure">
  <h3>
    <button>...</button>
  </h3>
  <div>
    <p>...</p>
  </div>
</div>
Two .disclosures, open and closed.

Form

Form compounds accept this set of classes:

Classic
.classic
Vertical
.v
Classic form
If you want to join us on this project, please fill this form. We will take care of your information, and we will send you monthly news to your inbox.
<form class="classic">

  <div class="ctrl">If you want to join us...</div>

  <label class="ctrl txt" for="form-03--txt-01">
    <span>
      <abbr class="req" title="Required information">*</abbr>Your name
    </span>
    <input id="form-03--txt-01" name="form-03--txt-01" placeholder="Name (required)" aria-describedby="form-03--txt-01--description" type="text" required>
    <small id="form-03--txt-01--description">Use your real name.</small>
  </label>

  <label class="ctrl txt" for="form-03--txt-02">
    <span>Your surname</span>
    <input id="form-03--txt-02" name="form-03--txt-02" placeholder="Surname" type="text">
  </label>

  <label class="ctrl sel" for="form-03--sel-01">
    <span>Country</span>
    <select id="form-03--sel-01" name="form-03--sel-01">
      <option value="">...</option>
    </select>
  </label>

  <label class="ctrl sel" for="form-03--sel-02">
    <span>Province / State</span>
    <select id="form-03--sel-02" name="form-03--sel-02">
      <option value="">...</option>
    </select>
  </label>

  <label class="ctrl rng" for="form-03--rng-01">
    <span>Skill Level</span>
    <input id="form-03--rng-01" name="skill-level" max="100" min="0" value="20" aria-describedby="form-03--rng-01--description" type="range">
    <small id="form-03--rng-01--description">Some small text.</small>
  </label>

  <label class="ctrl txt" for="form-03--txt-03">
    <span>Telephone number</span>
    <input id="form-03--txt-03" name="form-03--txt-03" placeholder="(0012) 012 345 678" type="tel">
  </label>

  <label class="ctrl txt" for="form-03--txt-04">
    <span><abbr class="req" title="Required information">*</abbr>Email</span>
    <input id="form-03--txt-04" placeholder="email@server.com" type="email" required>
  </label>

  <label class="ctrl swc" for="form-03--switch-01">
    <span>Switch</span>
    <input id="form-03--switch-01" type="checkbox">
    <span class="thumb"></span>
  </label>

  <label class="ctrl txta" for="form-03--txta-01">
    <span>Additional comments</span>
    <textarea id="form-03--txta-01" name="form-03--txta-01" placeholder="Any other thing you want to tell us?" rows="2"></textarea>
  </label>

</form>
form with class .classic.
Vertical form
If you want to join us on this project, please fill this form. We will take care of your information, and we will send you monthly news to your inbox.
<form class="v">

  <div class="ctrl">If you want to join us on this project, please fill this form. We will take care of your information, and we will send you monthly news to your inbox.</div>

  <label class="ctrl txt" for="form-01--txt-01">
    <span>
      <abbr class="req" title="Required information">*</abbr>Your name
    </span>
    <input id="form-01--txt-01" name="form-01--txt-01" placeholder="Name (required)" aria-describedby="form-01--txt-01--description" type="text" required>
    <small id="form-01--txt-01--description">Use your real name.</small>
  </label>

  <label class="ctrl txt" for="form-01--txt-02">
    <span>Your surname</span>
    <input id="form-01--txt-02" name="form-01--txt-02" placeholder="Surname" type="text">
  </label>

  <label class="ctrl sel" for="form-01--sel-01">
    <span>Country</span>
    <select id="form-01--sel-01" name="form-01--sel-01">
      <option value="">...</option>
    </select>
  </label>

  <label class="ctrl sel" for="form-01--sel-02">
    <span>Province / State</span>
    <select id="form-01--sel-02" name="form-01--sel-02">
      <option value="">...</option>
    </select>
  </label>

  <label class="ctrl rng" for="form-01--rng-01">
    <span>Skill Level</span>
    <input id="form-01--rng-01" name="skill-level" max="100" min="0" value="20" aria-describedby="form-01--rng-01--description" type="range">
    <small id="form-01--rng-01--description">Some small text.</small>
  </label>

  <label class="ctrl txt" for="form-01--txt-03">
    <span>Telephone number</span>
    <input id="form-01--txt-03" name="form-01--txt-03" placeholder="(0012) 012 345 678" type="tel">
  </label>

  <label class="ctrl txt" for="form-01--txt-04">
    <span><abbr class="req" title="Required information">*</abbr>Email</span>
    <input id="form-01--txt-04" placeholder="email@server.com" type="email" required>
  </label>

  <label class="ctrl swc" for="form-01--switch-01">
    <span>Switch</span>
    <input id="form-01--switch-01" type="checkbox">
    <span class="thumb"></span>
  </label>

  <label class="ctrl txta" for="form-01--txta-01">
    <span>Additional comments</span>
    <textarea id="form-01--txta-01" name="form-01--txta-01" placeholder="Any other thing you want to tell us?" rows="2"></textarea>
  </label>

</form>
form with class .v.

Flag

Flag compounds accept this set of classes:

Block
.block
Flip
.flip
Lorem ipsum dolor sit amet.

Flag first line
Second line
<div class="flag">
  <div class="visual">
    <img alt="" src="..."/>
  </div>
  <div class="textual">
    <div>Lorem ipsum dolor sit amet.</div>
  </div>
</div>

<div class="flag">
  <div class="visual">
    <img alt="" src="..."/>
  </div>
  <div class="textual">
    <div>Flag first line</div>
    <div>Second line</div>
  </div>
</div>
Default flag with one textual line, and with two textual lines.
Block
Flag first line
Second line
<div class="flag block">
  <div class="visual">
    <img alt="" src="..."/>
  </div>
  <div class="textual">
    <div>...</div>
    <div>...</div>
  </div>
</div>
Flag with class .block.
Flip
Flag first line
Second line
<div class="flag flip">
  <div class="visual">
    <img alt="" src="..."/>
  </div>
  <div class="textual">
    <div>...</div>
    <div>...</div>
  </div>
</div>
Flag with class .flip.

Group

a.btn
<div class="group" aria-label="Group 1" role="group">
  ...
</div>
.group with some elements.

Input group

https://example.com/users/
<div class="input-group">
  <span class="addon">...</span>
  <label class="txt" for="...">
    <span>...</span>
    <input id="..." placeholder="..." type="text">
  </label>
  <span class="addon">...</span>
</div>
.input-group with some elements.

Responsive embed

<div class="responsive-embed">
  <iframe src="..." title="..."></iframe>
</div>
Responsive embed video.

Tabs

panel1
subpanel1
subpanel2
subpanel3
panel2
panel3
panel4
<div class="tabs" aria-label="Tabs 1 label">
  <div role="tablist">
    <button role="tab">tab1</button>
    <button class="tab-icn-txt" role="tab">
      <svg viewBox="0 0 32 32" aria-hidden="true">
        ...
      </svg>
      <span>Tab icon 2</span>
    </button>
    <button class="tab-icn-txt v" role="tab">
      <svg viewBox="0 0 32 32" aria-hidden="true">
        ...
      </svg>
      <span>Tab icon 3</span>
    </button>
    <button class="tab-icn-txt v" role="tab">
      <span>Tab icon 4</span>
      <svg viewBox="0 0 32 32" aria-hidden="true">
        ...
      </svg>
    </button>
  </div>
  <div role="tabpanel">
    panel1

    <div id="putortabs" class="tabs" aria-label="Tabs label">
      <div role="tablist">
        <button aria-selected="true" role="tab" disabled>tab1 2</button>
        <button role="tab">tab2 2</button>
        <button role="tab">tab3 2</button>
      </div>
      <div role="tabpanel">
        subpanel1
      </div>
      <div role="tabpanel">
        subpanel2
      </div>
      <div role="tabpanel">
        subpanel3
      </div>
    </div>

  </div>
  <div role="tabpanel">
    panel2
  </div>
  <div role="tabpanel">
    panel3
  </div>
  <div role="tabpanel">
    panel4
  </div>
</div>
Tabs with tabs inside tab panel 1.