You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
image::../img/screenshot.png[Screenshot of Astra Portal Home]
11
+
image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home"]
12
12
13
13
=== Sizing and alignment
14
14
15
-
.400px width, align="left"
16
-
image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="left"]
15
+
.width=400,align=left
16
+
image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home",width=400,align=left]
17
17
18
-
.400px width,align="right"
19
-
image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="right"]
18
+
.width=400 width,align=right
19
+
image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home",width=400,align=right]
20
20
21
-
.400px width,align="center"
22
-
image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="center"]
21
+
.width=400 width,align=center
22
+
image::../img/screenshot.png[[alt="Screenshot of Astra Portal Home",width=400,align=center]
23
23
24
24
=== Float
25
25
26
26
[.float-group]
27
27
--
28
-
image:../img/screenshot.png[Screenshot of Astra Portal Home,300,float=right,role=float-gap]
28
+
image:../img/screenshot.png[[alt="Screenshot of Astra Portal Home",300,float=right,role=float-gap]
29
29
In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
36
36
--
37
37
38
-
== Inline images
39
-
40
-
Click image:../img/play_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Play] to get the party started.
38
+
=== Light and dark mode images
41
39
42
-
Click image:../img/pause_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Pause] when you need a break.
40
+
You can make an image appear differently in light mode vs. dark mode.
43
41
44
-
== Image theming (light/dark mode)
42
+
==== Two separate images
45
43
46
44
[NOTE]
47
-
======
48
-
You can define an image such that it appears differently in light mode vs. dark mode.
49
-
There are methods for doing this.
45
+
====
46
+
Define two images: one that looks good in light mode, and one that looks good in dark mode.
47
+
Then, assign the corresponding `for-light` and `for-dark` roles to each image.
48
+
49
+
* All non-SVG images, such as screenshot PNG files, must use this method.
50
+
* All SVG images that do not use <<svg-images-css,CSS variables>> must use this method.
50
51
51
-
Method 1: Two separate images::
52
-
Define two images, one that looks good in light mode and one that looks good in dark mode.
53
-
Assign the corresponding roles -- `for-light` and `for-dark` -- to each image.
54
-
+
55
-
All non-SVG images, such as screenshot PNG files, must use this method.
56
-
All SVG images that do not use CSS variables must also use this method.
Click the Astra Vector icon image:../img/astra-vector-light.svg[title="Astra Vector",role=for-light] image:../img/astra-vector-dark.svg[title="Astra Vector",role=for-dark].
97
+
You can add icons in line with text and other elements.
110
98
111
-
== Icons
99
+
[#font-icons]
100
+
=== Font icons
112
101
113
102
[NOTE]
114
103
======
115
-
You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,window=_blank] and https://lucide.dev/icons/[Lucide Icons,window=_blank] with the icon macro. You can also create custom icons with SVG files using the svg macro.
104
+
Use the `icon` macro to invoke font icons from https://lucide.dev/icons/[Lucide Icons] and https://fonts.google.com/icons[Material Icons].
105
+
The `icon` macro follows https://developers.google.com/style/ui-elements#buttons[accessibility standards] and provides built-in support for light and dark mode.
116
106
117
-
Method 1: icon macro::
118
-
The inline icon macro accepts a Lucide or Material icon name as the target source.
119
-
+
120
-
This method supports light and dark mode automatically.
121
-
+
122
-
[source,title="Lucide"]
107
+
Lucide is the default icon set.
108
+
You can invoke a Lucide icon with either `\icon:icon-name[]` or `\icon:lucide:icon-name[]`:
109
+
110
+
.Lucide
111
+
[source,asciidoc]
123
112
----
124
-
// the icon macro uses lucide by default
125
-
icon:boom-box[]
126
-
// or specifiy lucide
127
-
icon:lucide:boom-box[]
113
+
Click icon:settings[name="Settings"] to configure your settings. // <.>
128
114
129
-
// show the icon with visible text to the right
130
-
Click icon:settings[name="Settings"] to configure your settings.
115
+
icon:moon[alt="That's no moon"] // <.>
131
116
132
-
// alt or title attribute create an aria-label
133
-
icon:atom[title="Split the atom"]
134
-
icon:moon[alt="That's no moon"]
117
+
icon:atom[title="Split the atom"] // <.>
135
118
136
-
// customize with tailwind classes as the role
137
-
With tailwind roles icon:star[role="text-amber-600 text-2xl"]
119
+
icon:star[role="text-amber-600 text-2xl"] // <.>
138
120
139
-
// customize the size in px
140
-
icon:star[size="60"]
121
+
icon:star[size="60"] // <.>
141
122
----
142
-
+
143
-
[source,title="Material"]
123
+
<.> Use the `name` attribute to add visible text to the right of the icon.
124
+
125
+
<.> Use the `alt` attribute to define an `aria-label` label for the icon.
126
+
The text is invisible but is read by screen readers.
127
+
_Do not use `alt` if `name` or `title` is already defined._
128
+
129
+
<.> The `title` attribute does the same thing as `alt`, except the text is also visible as a tooltip on hover.
130
+
_Do not use `title` if `name` or `alt` is already defined._
131
+
132
+
<.> Use the `role` attribute to apply Tailwind CSS classes to the icon.
133
+
134
+
<.> Use the `size` attribute to define the icon size in pixels.
135
+
136
+
You can invoke a Material icon with `\icon:material:icon-name[]`.
137
+
All of the same attributes apply:
138
+
139
+
.Material
140
+
[source,asciidoc]
144
141
----
145
-
// specifiy material
146
-
icon:material:chevron-down[]
142
+
Click icon:material:settings[name="Settings"] to configure your settings.
This methods supports using CSS variables within the svg.
162
-
+
163
-
[source]
164
-
----
165
-
svg:ROOT:ui/icons/vector.svg[role="icon"]
166
-
----
153
+
.Legacy font icon methods
154
+
[%collapsible]
155
+
=====
156
+
[WARNING]
157
+
====
158
+
These methods were previously used to invoke font icons and should no longer be used.
159
+
====
167
160
168
-
Method 3: block or inline span with material-icons role::
169
-
Use the custom role `material-icons` on block or inline content. The content must be a material icon name in lower case. If there are spaces in the name, use underscores instead.
161
+
Block or inline span with material-icons role::
170
162
+
163
+
--
164
+
Use the custom role `material-icons` on block or inline content. The content must be a material icon name in lower case. If there are spaces in the name, use underscores instead.
165
+
171
166
This method supports light and dark mode automatically.
0 commit comments