Punktlistor
På den här sidan hittar du instruktioner hur du skapar punktlistor på vår webbplats i Sitevision. Här beskriver vi också vilka olika formatmallar du kan välja mellan och när de passar bäst att använda.
Så skapar du en punktlista
window.svDocReady(function(){
// Remove all elements with the class "ws-accessibility-hook"
document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) {
hook.remove();
});
// Iterate over each ".ws-plusbox" element
document.querySelectorAll(".ws-plusbox").forEach(function(box, i) {
var collapseContainer = box.parentElement.nextElementSibling;
// Check if the next sibling element has the "env-collapse" class
if (collapseContainer && collapseContainer.classList.contains("env-collapse")) {
var containerId = 'plusbox-' + i;
box.setAttribute('data-containerid', containerId);
var anchor = box.querySelector("a");
if (anchor) {
anchor.setAttribute("href", '#' + containerId);
anchor.setAttribute("aria-controls", containerId);
// Add a click event to toggle collapsible content
anchor.addEventListener("click", function(event) {
event.preventDefault(); // Prevent the default link behavior
envision.collapse("#" + containerId).then(function(collapses) {
if (collapses[0].isVisible()) {
collapses[0].hide();
anchor.setAttribute("aria-expanded", "false");
} else {
collapses[0].show();
anchor.setAttribute("aria-expanded", "true");
}
});
});
}
collapseContainer.setAttribute("id", containerId);
collapseContainer.classList.add("ws-plusbox__container");
} else {
console.error("Couldn't find container to associate button with");
}
});
// Check for hash in URL to open specific collapsible content
window.addEventListener("hashchange", (event) => {
if (location.hash) {
document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView();
}
})
});
Du hittar alla formatmallar för punktlistor i verktygslisten högst upp på sidan när du är inloggad. Skriva punkterna (varje punkt på egen rad). Markera texten. Gå till punktlisteikonen uppe i verktygsfältet. Välj vilken typ av punktlista du vill använda.
Vilken punktlista ska jag använda?
window.svDocReady(function(){
// Remove all elements with the class "ws-accessibility-hook"
document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) {
hook.remove();
});
// Iterate over each ".ws-plusbox" element
document.querySelectorAll(".ws-plusbox").forEach(function(box, i) {
var collapseContainer = box.parentElement.nextElementSibling;
// Check if the next sibling element has the "env-collapse" class
if (collapseContainer && collapseContainer.classList.contains("env-collapse")) {
var containerId = 'plusbox-' + i;
box.setAttribute('data-containerid', containerId);
var anchor = box.querySelector("a");
if (anchor) {
anchor.setAttribute("href", '#' + containerId);
anchor.setAttribute("aria-controls", containerId);
// Add a click event to toggle collapsible content
anchor.addEventListener("click", function(event) {
event.preventDefault(); // Prevent the default link behavior
envision.collapse("#" + containerId).then(function(collapses) {
if (collapses[0].isVisible()) {
collapses[0].hide();
anchor.setAttribute("aria-expanded", "false");
} else {
collapses[0].show();
anchor.setAttribute("aria-expanded", "true");
}
});
});
}
collapseContainer.setAttribute("id", containerId);
collapseContainer.classList.add("ws-plusbox__container");
} else {
console.error("Couldn't find container to associate button with");
}
});
// Check for hash in URL to open specific collapsible content
window.addEventListener("hashchange", (event) => {
if (location.hash) {
document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView();
}
})
});
Punktlista (stylad) punkt 1 punkt 2 punkt 3 Använd stylade punktlistor i första hand för att få ett enhetligt och visuellt tilltalande utseende på webbplatsens sidor. Numrerad (stylad) Använd numrerad stylade punktlistor i första hand för instruktioner och processer där både ordning och ett konsekvent grafiskt uttryck är viktigt. punkt 1 punkt 2 punkt 3 Punktlista (stylad länk) Används när punktlistan främst består av länkar som ska vara tydliga, lätta att följa. punkt 1 punkt 2 punkt 3 Punktlista Denna enkla punktlistan med svarta punkter används endast i undantagsfall. punkt 1 punkt 2 punkt 3 Numrerad punktlista Den enkla numrerade listan med svarta siffror används i andra hand (i första hand använder du numrerad stylad lista) när ordningen är viktig, till exempel vid instruktioner eller steg-för-steg-guider. punkt 1 punkt 2 punkt 3
Håll koll på formateringen
Håll koll i formateringsrutan högst upp i verktygslisten så att din punktlista verkligen består av brödtext. Ibland hoppar den formateringen ur. Du måste då markera texten och välja brödtext på nytt.
Så skriver du korrekta punktlistor
window.svDocReady(function(){
// Remove all elements with the class "ws-accessibility-hook"
document.querySelectorAll(".ws-accessibility-hook").forEach(function(hook) {
hook.remove();
});
// Iterate over each ".ws-plusbox" element
document.querySelectorAll(".ws-plusbox").forEach(function(box, i) {
var collapseContainer = box.parentElement.nextElementSibling;
// Check if the next sibling element has the "env-collapse" class
if (collapseContainer && collapseContainer.classList.contains("env-collapse")) {
var containerId = 'plusbox-' + i;
box.setAttribute('data-containerid', containerId);
var anchor = box.querySelector("a");
if (anchor) {
anchor.setAttribute("href", '#' + containerId);
anchor.setAttribute("aria-controls", containerId);
// Add a click event to toggle collapsible content
anchor.addEventListener("click", function(event) {
event.preventDefault(); // Prevent the default link behavior
envision.collapse("#" + containerId).then(function(collapses) {
if (collapses[0].isVisible()) {
collapses[0].hide();
anchor.setAttribute("aria-expanded", "false");
} else {
collapses[0].show();
anchor.setAttribute("aria-expanded", "true");
}
});
});
}
collapseContainer.setAttribute("id", containerId);
collapseContainer.classList.add("ws-plusbox__container");
} else {
console.error("Couldn't find container to associate button with");
}
});
// Check for hash in URL to open specific collapsible content
window.addEventListener("hashchange", (event) => {
if (location.hash) {
document.querySelector(location.hash).nextElementSibling.querySelector('a.env-collapse-header').click().scrollIntoView();
}
})
});
Punktlistor är bra vid långa uppräkningar eller för att framhäva viktig information. Läs mer om hur, när och varför du ska göra punktlistor. Checklistan för webbskribenter Så skriver du korrekta punktlistor (Språkkonsulterna)
Senast uppdaterad: 3 mars 2026