NodOnce : Think · Make · Launch

an ee.startup

what is genes.zone?

contact telegram twitter
genes:one
UI

Cards, Alerts, Modals

Just chill, these are just div's with some styling...

These containers, alert boxes and modals are just humble suggestions to use in your application.
Work with a designer for them to fit your branding and corporate identity, these things matter ;)

Cards

Cards are practical to use as small and quick boxes of information.
Having said that, actually this complete documentation is made of cards :)
Use however you want, as a framework must allow you to...
.g1r {...} // multiple rules to create a gutter of 1rem between things you stack side by side.
.ct {...} // converts an h5, for example, into a card title.
.cc {...} // converts a p, for example, into a card content.


  <div class="g1r">
    <div class="card dib w25p h20r">
      <img src="ui/img/ee-sample-1.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
    <div class="card dib w25p h20r">
      <img src="ui/img/ee-sample-2.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
    <div class="card dib w25p h20r">
      <img src="ui/img/ee-sample-3.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
    <div class="card dib w25p h20r">
      <img src="ui/img/ee-sample-4.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
  </div>


          
A sample card title

Short detail may also be cool.

A sample card title

Short detail may also be cool.

A sample card title

Short detail may also be cool.

A sample card title

Short detail may also be cool.

3 cards side-by-side no height specified...
Images auto-fill the width. When you use proper images everything looks cool and easy.


  <div class="g1r">
    <div class="card dib w33p">
      <img src="ui/img/ee-sample-1.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
    <div class="card dib w33p">
      <img src="ui/img/ee-sample-2.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
    <div class="card dib w33p">
      <img src="ui/img/ee-sample-3.jpg">
      <h5 class="ct">A sample card title</h5>
      <p class="cc">Short detail may also be cool.</p>
    </div>
  </div>


          
A sample card title

Short detail may also be cool.

A sample card title

Short detail may also be cool.

A sample card title

Short detail may also be cool.

Alerts

You can use alerts to draw attention to an info, a warning or an error.


  <div class="alert p2r mt2r mb2r">
    <h5 class="at">Did you know, that these are the alerts?</h5>
    <p>Lorem ipsum dolor sit...</p>
  </div>
  <div class="alert error p2r mt2r mb2r">
    <h5 class="at">Oh, no! Something very bad happened.</h5>
    <p>Lorem ipsum dolor sit...</p>
  </div>
  <div class="alert info p2r mt2r mb2r">
    <h5 class="at">Alerts are cool.</h5>
    <p>Lorem ipsum dolor sit...</p>
  </div>
  <div class="alert warning p2r mt2r mb2r">
    <h5 class="at">Beware, this is an alert! Are you sure?</h5>
    <p>Lorem ipsum dolor sit...</p>
  </div>
  <div class="alert success p2r mt2r mb2r">
    <h5 class="at">Oh, great! You've managed to click a button.</h5>
    <p>Lorem ipsum dolor sit...</p>
  </div>
  <div class="alert dark p2r mt2r mb2r">
    <h5 class="at">Hey, people. Dark mode is just light fonts on dark color backgrounds, what's the fuzz?</h5>
    <p>Lorem ipsum dolor sit...</p>
  </div>


          
Did you know, that these are the alerts?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Oh, no! Something very bad happened.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Alerts are cool.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Beware, this is an alert! Are you sure?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Oh, great! You've managed to click a button.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Hey, people. Dark mode is just light fonts on dark color backgrounds, what's the fuzz?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Modals

Modals are just Cards or Alerts that open on weird places.
Oh, with a semi-transparent full screen background to focus the user's attention.

Toasts

Toasts are just Cards or Alerts that open on weird places also.
Generally some corner or edge of the screen.
And they generally stack to show multiple of them...
Oh, they may also have timeouts to hide.

×

Contact NodOnce : Say Something!