| <!DOCTYPE html> |
| <!-- |
| @WAIT-FOR:Ready |
| @BLINK-ALLOW:htmlTag* |
| @BLINK-ALLOW:className* |
| --> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Material Web Cards</title> |
| <script type="module"> |
| import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js"; |
| injectImportMap(); |
| |
| const components = [ |
| "md-elevated-card", |
| "md-filled-card", |
| "md-outlined-card" |
| ]; |
| |
| loadAndWaitForReady(components, () => { |
| const statusDiv = document.getElementById("status"); |
| const cards = [ |
| { |
| tag: "md-elevated-card", |
| headline: "Elevated Card", |
| subhead: "Card subheading", |
| content: "Card content goes here." |
| }, |
| { |
| tag: "md-filled-card", |
| headline: "Filled Card", |
| subhead: "Another subheading", |
| content: "This is a filled card with content." |
| }, |
| { |
| tag: "md-outlined-card", |
| headline: "Outlined Card", |
| subhead: "Outlined style", |
| content: "Content for the outlined card variant." |
| } |
| ]; |
| cards.forEach(cardInfo => { |
| const card = document.createElement(cardInfo.tag); |
| const headline = document.createElement("div"); |
| headline.slot = "headline"; |
| headline.textContent = cardInfo.headline; |
| const subhead = document.createElement("div"); |
| subhead.slot = "subhead"; |
| subhead.textContent = cardInfo.subhead; |
| const content = document.createElement("div"); |
| content.textContent = cardInfo.content; |
| card.appendChild(headline); |
| card.appendChild(subhead); |
| card.appendChild(content); |
| statusDiv.appendChild(card); |
| }); |
| statusDiv.setAttribute("aria-label", "Ready"); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="status" aria-label="Loading"> |
| </div> |
| </body> |
| </html> |
