Sequence
The sequence component displays ordered steps or timeline events with visual indicators and status tracking. Use sequences to guide users through multi-step processes, show project timelines, or present chronological information with clear progression indicators. The component supports different visual styles (steps vs timeline) and status states to communicate progress and completion effectively.
Do
- Use clear, descriptive step titles that accurately communicate what happens at each stage of the process.
- Provide detailed step content that explains what users need to do or what occurs during each phase.
- Order steps logically in chronological or procedural sequence to match user expectations and workflows.
- Include status indicators (completed, in-progress, on-hold, canceled) to show current progress through the sequence.
- Use consistent formatting across all sequence items to maintain visual hierarchy and readability.
- Add lead-in text to provide context about the current status or timing of each step.
- Include relevant links when steps require additional resources or detailed information.
- Test responsive behavior to ensure sequences remain readable and functional on all screen sizes.
Don’t
- Don’t use sequences for unrelated items — steps should be part of a connected process or timeline.
- Don’t make step content too brief — provide enough detail for users to understand what’s required or happening.
- Don’t ignore visual hierarchy — maintain consistent heading levels and content structure throughout.
- Don’t use unclear status indicators — ensure status labels clearly communicate the current state.
- Don’t overcomplicate simple processes — consider whether a basic list might be more appropriate for short sequences.
- Don’t forget mobile users — test how sequence content displays and functions on smaller screens.
- Don’t use inconsistent terminology — maintain the same language patterns across all sequence steps.
- Don’t omit important steps — include all necessary phases even if some seem obvious to avoid user confusion.
Timeline
Chronological timeline with status indicators for project phases. Shows the timeline variant with different status states (completed, in-progress, on-hold, canceled) and detailed content for each phase. Use this pattern for project updates, historical events, or any time-based progression with status tracking.
Completed
Pre-Application Consultation
Before formally submitting a development plan for approval, it is essential to engage in pre-application consultation. This phase allows developers, planners, and stakeholders to discuss the project scope, identify potential issues, and align expectations early in the process. It minimizes surprises and improves the likelihood of a smooth approval process.
Key activities include:
- Meeting with local planning authorities to understand requirements.
- Consulting with affected community members and interest groups.
- Preparing initial sketches and feasibility studies for feedback.
- Reviewing zoning laws and environmental regulations relevant to the site.
By addressing concerns early, the development team can adjust their plans accordingly, ensuring stronger support once the formal application is submitted.
In Progress
Submission of Development Plan Application
Once the pre-application consultations are complete, the formal development plan application is prepared and submitted to the relevant planning authority. This submission must comply with local regulations and include all necessary documentation to enable a thorough evaluation.
The application package typically includes:
- Detailed site plans and architectural drawings.
- Environmental impact assessments.
- Traffic and infrastructure assessments.
- Proof of ownership or land control.
- Community consultation reports.
Timely and accurate submission of these materials is critical to avoid delays. Upon receipt, the planning authority officially starts the review process.
On Hold
Review and Public Notification
After submission, the planning authority reviews the development plan in detail. This step involves multiple internal consultations and often requires input from various departments, such as environmental, transportation, and public safety agencies.
At this stage, there is also a public notification and comment period, where residents and interested parties can provide feedback or raise objections.
Typical review activities include:
- Technical evaluation of environmental, social, and economic impacts.
- Coordination with supporting agencies.
- Organizing public hearings or meetings.
- Collecting and summarizing community feedback.
The planning authority may request additional information or recommend modifications to ensure compliance with policy objectives and community interests.
Canceled
Decision and Approval
The final step is the formal decision on the development plan. Based on the review and public input, the planning authority will either approve the plan, request further changes, or reject the application.
Possible outcomes include:
- Approval with conditions: The plan is approved subject to specific requirements (e.g., landscaping, traffic mitigation).
- Deferred decision: Additional information or revisions are needed before a final decision is made.
- Rejection: The plan does not meet the required criteria and cannot proceed.
Once approved, the developer can proceed to subsequent phases, such as obtaining permits and commencing construction. It is important for the developer to carefully adhere to any conditions imposed to maintain compliance throughout the project lifecycle.
Steps
Sequential step-by-step process guide for permit applications. Demonstrates the steps variant with clear progression through a multi-stage process. Use this pattern for instructional content, application processes, or any workflow where users need to complete tasks in order.
Initial Application Submission
The first step in acquiring a highway sign permit involves submitting a formal application to the relevant transportation or public works department. This application usually requires detailed information about the proposed sign, including its size, location, design, and purpose. Applicants may need to provide site plans, photographs, and any necessary sketches to clearly illustrate where and how the sign will be installed. Ensuring that the application is complete and accurate is crucial to avoid delays in processing.
Review and Compliance Evaluation
Once the application is submitted, the responsible agency will review it to ensure that the proposed sign complies with all applicable laws, regulations, and guidelines. This includes evaluating the sign’s size, height, lighting, and placement relative to traffic safety and visibility standards. The agency may also assess environmental impacts or zoning restrictions. During this stage, applicants might be asked to provide additional documentation or make modifications to their proposal to meet regulatory requirements.
Permitting Decision and Fee Payment
After the review, the agency will make a decision regarding the issuance of the permit. If approved, the applicant will be notified and required to pay any applicable fees associated with the permit. These fees typically cover administrative costs, inspections, and maintenance oversight. It is essential for the applicant to retain a copy of the approved permit, as unauthorized installation of signs without proper permits can result in fines or removal orders.
Installation and Inspection
The final step involves the actual installation of the highway sign in accordance with the approved plans and permit conditions. The authority may require an inspection either during or after installation to verify that the sign meets all technical and safety standards. Any deviations found during the inspection will need to be corrected promptly. Successful completion of this step ensures that the sign is legally permitted, safe for motorists, and compliant with all regulations.
Accessibility Best Practices
Screen Reader Support
- Proper heading hierarchy: Uses consistent heading tags (h3) to maintain document structure and navigation.
- Descriptive step titles: Each sequence item has clear, specific titles that communicate the step purpose.
- Status indication: Lead-in text and status classes provide clear context about progress and completion.
- Structured content: Uses proper paragraph and list markup within sequence items for clear content organization.
Keyboard Navigation
- Logical tab order: Sequence items and their interactive elements follow natural reading order.
- Link accessibility: Any links within sequence items are keyboard accessible and properly labeled.
- Focus management: Users can navigate through sequence content efficiently without getting trapped.
- Skip functionality: Sequence structure allows users to skip between major sections when needed.
Visual Accessibility
- Clear visual progression: Border and spacing indicators show sequence flow without relying solely on color.
- High contrast ratios: All sequence text and status indicators meet WCAG AA contrast requirements.
- Status differentiation: Different sequence states use multiple visual cues beyond color alone.
- Responsive design: Sequence maintains readability and visual hierarchy across all screen sizes.
Content Guidelines
- Action-oriented titles: Write step titles that clearly describe what happens or what users need to do.
- Detailed explanations: Provide sufficient detail in step content to guide users effectively.
- Consistent status language: Use standard terminology for status indicators across all sequences.
- Clear progression: Ensure the logical flow from one step to the next is obvious to users.
Implementation Considerations
- Status management: Plan how sequence status will be updated and maintained in your content management system.
- Content flexibility: Design sequences to accommodate varying amounts of content per step.
- Visual consistency: Maintain consistent spacing and styling across different sequence implementations.
- Performance: Consider lazy loading for sequences with extensive content or media.
ARIA Attributes in Use
role="list"— Applied to sequence containers when appropriate for screen reader navigation.aria-label— Provides additional context for sequence sections when titles alone might be insufficient.aria-describedby— Connects sequence items to related status or timing information.aria-current="step"— Indicates the current step in active processes when applicable.