Installation & usage guide

function ApplicationCard() {
  return (
    <div className="ux4g-card ux4g-card-solid ux4g-card-vertical">
      <div className="ux4g-card-body">
        <h2 className="ux4g-card-title">Passport Application</h2>

        <div className="ux4g-form-group">
          <label className="ux4g-label">Full Name</label>
          <input className="ux4g-input" type="text" required />
        </div>
        <div className="ux4g-form-group">
          <label className="ux4g-label">Email</label>
          <input className="ux4g-input" type="email" required />
        </div>

        <div className="ux4g-alert ux4g-alert-info">
          <span>Processing time: 7-10 business days</span>
        </div>
      </div>

      <div className="ux4g-card-footer">
        <button className="ux4g-btn ux4g-btn-outline-primary ux4g-btn-md">Save Draft</button>
        <button className="ux4g-btn ux4g-btn-primary ux4g-btn-md">Submit</button>
      </div>
    </div>
  );
}

import { useState } from 'react';

function LoginForm() {
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    // Your own validation and submission logic
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="ux4g-form-group">
        <label className="ux4g-label">Email</label>
        <input className="ux4g-input" type="email" required />
        {errors.email && <span className="ux4g-input-helper">{errors.email}</span>}
      </div>

      <div className="ux4g-form-group">
        <label className="ux4g-label">Password</label>
        <input className="ux4g-input" type="password" required />
        {errors.password && <span className="ux4g-input-helper">{errors.password}</span>}
      </div>

      <button type="submit" className="ux4g-btn ux4g-btn-primary ux4g-btn-md">
        Sign In
      </button>
    </form>
  );
}