Text
@use "../abstracts/css-util";
.heading1 {
font-family: css-util.get-var(heading1,font);
font-size: css-util.get-var(heading1,text-size);
font-weight: css-util.get-var(heading1,text-weight);
color: css-util.get-var(heading1,text-color);
line-height: css-util.get-var(heading1,line-height);
}
.heading2 {
font-family: css-util.get-var(heading2,font);
font-size: css-util.get-var(heading2,text-size);
font-weight: css-util.get-var(heading2,text-weight);
color: css-util.get-var(heading2,text-color);
line-height: css-util.get-var(heading2,line-height);
}
.heading3 {
font-family: css-util.get-var(heading3,font);
font-size: css-util.get-var(heading3,text-size);
font-weight: css-util.get-var(heading3,text-weight);
color: css-util.get-var(heading3,text-color);
line-height: css-util.get-var(heading3,line-height);
margin-inline: 0 !important;
display: flex;
align-items: center;
}
.heading4 {
font-family: css-util.get-var(heading4,font);
font-size: css-util.get-var(heading4,text-size);
font-weight: css-util.get-var(heading4,text-weight);
color: css-util.get-var(heading4,text-color);
line-height: css-util.get-var(heading4,line-height);
display: flex;
align-items: center;
}
.paragraph {
font-family: css-util.get-var(paragraph,font);
font-size: css-util.get-var(paragraph,text-size);
font-weight: css-util.get-var(paragraph,text-weight);
color: css-util.get-var(paragraph,text-color);
line-height: css-util.get-var(paragraph,line-height);
&-align-center {
text-align: center;
}
strong {
font-weight: 600;
}
}
.microcopy {
color: css-util.get-var(microcopy,text-color) !important;
font-family: css-util.get-var(paragraph,font);
font-size: css-util.get-var(microcopy,text-size);
font-weight: css-util.get-var(microcopy,text-weight);
line-height: 1.4;
&-label {
font-style: italic;
font-size: css-util.get-var(microcopy,text-size);
}
a {
color: css-util.get-var(microcopy,text-color);
}
}
.text-list {
list-style-position: inside;
font-family: css-util.get-var(text-list,font);
font-size: css-util.get-var(text-list,text-size);
font-weight: css-util.get-var(text-list,text-weight);
color: css-util.get-var(text-list,text-color);
line-height: css-util.get-var(text-list,line-height);
&-bullet {
list-style-type: disc;
}
&-number {
list-style-type: decimal;
}
}
.text-row {
display: flex;
flex-direction: row;
gap: 1.6rem;
align-items: center;
flex-shrink: 0;
&-align-wide {
justify-content: space-between;
}
p {
margin:0;
}
}
.text-group {
display: flex;
flex-direction: column;
gap: 1.2rem;
text-align: left;
&-align-center {
text-align: center;
align-items: center;
}
}
Heading
Default
heading1
heading2
heading3
heading4
heading1
heading2
heading3
heading4
Paragraph
Default
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda
aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam
accusantium. Repellat, officia corporis.
Center
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda
aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam
accusantium. Repellat, officia corporis.
Microcopy
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde laboriosam accusantium. Repellat, officia corporis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus iste aliquid
assumenda aliquam animi eligendi quia, ex expedita distinctio, magni nemo consequatur vitae eum unde
laboriosam accusantium. Repellat, officia corporis.
List
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
- list-item
Row
Group
Default
Heading
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!
- list-item
- list-item
- list-item
Heading
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!
- list-item
- list-item
- list-item
Center
Heading
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!
- list-item
- list-item
- list-item
Heading
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quis suscipit illo natus repudiandae hic sit ipsum eaque consequatur, ipsam, unde explicabo. Nobis aspernatur est labore, magnam maiores numquam animi!
- list-item
- list-item
- list-item