Sample Article
Posted on June 15, 2023
This is a sample article content that demonstrates the use of the article semantic element.
HTML Elements
Basic HTML elements for testing purposes
Text Elements
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs & Formatting
This is a normal paragraph with bold text, italic text,
underlined text, and strikethrough text.
This is a paragraph with a link and
code snippet.
Lists & Tables
Lists
Unordered List
- Item 1
- Item 2
- Item 3
- Subitem A
- Subitem B
Ordered List
- First item
- Second item
- Third item
- Subitem I
- Subitem II
Table
| ID | Name | Category | Price |
|---|---|---|---|
| 001 | Product A | Electronics | $99.99 |
| 002 | Product B | Clothing | $29.99 |
| 003 | Product C | Books | $19.99 |
Media Elements
Images
Landscape Image
Portrait Image
Embedded Content
Embedded Video Placeholder
Semantic Elements
Article
Section
Sample Section
This is a sample section content that demonstrates the use of the section semantic element.
Aside
Forms
Test various form elements and their interactions
Interactive Elements
Test different interactive elements and their behaviors
Buttons & Links
Tabs & Accordions
Tabs
This is the content for Tab 1. You can put any information here, including text, images, or other HTML elements.
Accordions
This is the content for Accordion Item 1. Click the button to toggle the visibility of this content.
This is the content for Accordion Item 2. Click the button to toggle the visibility of this content.
This is the content for Accordion Item 3. Click the button to toggle the visibility of this content.
Alerts & Tooltips
Alert Types
This is an information alert. It provides helpful information to the user.
This is a success alert. It indicates that an action was successful.
This is a warning alert. It indicates a potential issue or problem.
This is an error alert. It indicates that something went wrong.
Tooltips
Modals & Dialogs
Modal Examples
Dialog Examples
Notification Examples
Layout Examples
Test different layout structures and their responsiveness
Responsive Grid Layout
Grid Item 1
1 column on mobile, 2 on small, 3 on medium, 4 on large screens
Grid Item 2
1 column on mobile, 2 on small, 3 on medium, 4 on large screens
Grid Item 3
1 column on mobile, 2 on small, 3 on medium, 4 on large screens
Grid Item 4
1 column on mobile, 2 on small, 3 on medium, 4 on large screens
Two Column Layout
Main Content
This is the main content area of a two-column layout. It typically contains the primary information or functionality of the page.
The sidebar would usually contain supplementary information, navigation, or calls-to-action.
Sidebar
- Supplementary information
- Related links
- Navigation menu
- Advertisements
Three Column Layout
Column 1
This is the first column in a three-column layout. It could contain navigation, featured content, or widgets.
Column 2
This is the second column in a three-column layout. It typically contains the main content or primary information.
Column 3
This is the third column in a three-column layout. It could contain additional information, widgets, or related content.
Card Layout
Card Title
This is a sample card with an image, title, description, and action buttons.
Card Title
This is a sample card with an image, title, description, and action buttons.
Card Title
This is a sample card with an image, title, description, and action buttons.