Welcome

This is an example of a welcome screen with a primary color background.

Welcome

This is an example of a welcome screen with a gradient background.

Welcome

This is an example of a welcome screen with a dark background.

Call to action section

This is an elegant and user-friendly way to increase conversions on your website. It has different styles and layouts.

Call to action section

This is an elegant and user-friendly way to increase conversions on your website. It has different styles and layouts.

Call to action section

This is an elegant and user-friendly way to increase conversions on your website. It has different styles and layouts.

Countdown timer

8
Days
10
hours
17
minutes
7
seconds

You don't need to edit any JavaScript files to create your own countdown timer.
Just edit the date in this html markup
data-countdown="2015/12/24"



Icon styles


Buttons

Button Button Button Button



Pricing tables

Plan 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • Includes this
  • Includes this
$10

Plan 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • Includes this
  • Includes this
  • And this
$100

Plan 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • Includes this
  • Includes this
  • And this
  • And even that
$1000

This is a gradient background section

It only takes a few seconds to create a content section like this.
SD UI template has a lot of prebuilt styles for sections, buttons, lists, etc.

This is an angle-gradient background section

It only takes a few seconds to create a content section like this.
SD UI template has a lot of prebuilt styles for sections, buttons, lists, etc.

This is a radial gradient background section

It only takes a few seconds to create a content section like this.
SD UI template has a lot of prebuilt styles for sections, buttons, lists, etc.

This is a primary-color background section

It only takes a few seconds to create a content section like this.
SD UI template has a lot of prebuilt styles for sections, buttons, lists, etc.

This is a dark background section

It only takes a few seconds to create a content section like this.
SD UI template has a lot of prebuilt styles for sections, buttons, lists, etc.

Tables

Title Title Title Title
Text Text Text Text
Text Text Text Text
Text Text Text Text

Reviews

Bill Gates
Steve Jobs
John Doe
Your Name

Typography styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ve`niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Highlighted text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Paragraph "secondary": Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ve`niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Regular list

  • List item
  • List item
  • List item
  • List item

Bullet list

  • List item
  • List item
  • List item
  • List item

Square bullets

  • List item
  • List item
  • List item
  • List item

Ordered list

  1. List item
  2. List item
  3. List item
  4. List item

Inline list

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Checklist

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Steve Jobs

Definition list

Definition title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Definition title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Definition title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Definition title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

Form elements


Modal windows

Create 'div' element (content of a modal window) with the attribute data-modal-content="1"
Then, create a button with the attribute data-modal="1"
That's it. You can create as many modal windows as you want


Modal window title

You can include on your page as many modal windows as you want.



Footers


Grid

SD UI uses responsive, simple and powerful Foundation Grid.

Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.

Grid documentation: http://foundation.zurb.com/docs/components/grid.html

Block grid documentation: http://foundation.zurb.com/docs/components/block_grid.html


Animations

Welcome screen animation on page load: just add class .animate-welcome to the .welcome-message container.

Sections reveal animation: add class .animate-show to the any container and your content will be loaded with animation.